easy-waterfall

v1.0.11

Published

2 years ago

H5 easy water fall list Component

Downloads

0High
0Medium
0Low

fengshangbin

easy water fall

WaterFall

masonry layout JS Component 瀑布流排版 GitHub Pages: https://github.com/fengshangbin/WaterFall

设计理念

不依赖第三方框架，也无侵入，功能全面，使用简单。

特点及优势

原生脚本，不依赖第三方框架
多种排版模式，支持各种实际排版需求
兼容 px em rem %多种宽度单位
支持下拉到底时追加下一页视图
使用简单且已内置 vue 集成

在线测试

https://www.fengshangbin.com/html/waterfall/

如何使用

1, 引入 waterfall 脚本

<script src="waterfall.js"></script>

var waterFall = WaterFall.builder(container, options);

或

npm i easy-waterfall -S

import {builder as waterfall} from 'easy-waterfall';

var waterFall = new waterfall(container, options);

container 瀑布流容器
options 配置参数

options 完整默认值

{
  minWidth: null,
  columns: null,
  width: null,
  gap: null,
  minGap: null,
  itemSelector: null,
  scrollParent: window,
  loading:
    '<div class="water-fall-loading"><svg viewBox="0 0 50 50" class="loading"><defs><linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#000" stop-opacity="1.0" /><stop offset="90%" stop-color="#000" stop-opacity="0" /></linearGradient></defs><circle cx="25" cy="25" r="20" stroke-width="5" stroke="url(#linear)" fill="none" /></svg><div>'
};

scrollParent 如果是指定 div，应该设置成元素选择的字符串如".communitys-all"

2, 在 vue 中使用

<template>
  <waterfall class="total-report" :options="{minWidth:'200px', gap:'15px'}">
    <div class="grid-content bg-purple"></div>
    <div class="grid-content bg-purple"></div>
    <div class="grid-content bg-purple"></div>
    <div class="grid-content bg-purple"></div>
    <div class="grid-content bg-purple"></div>
  </waterfall>
</template>

<script>

import waterfall from "easy-waterfall/dist/waterfallVue";
export default {
  components: {
    waterfall
  }
};
</script>

<style lang="less" scoped>
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    min-height: 150px;
  }
</style>

3, 三种排版模式

1, 指定子项最小宽度

{minWidth:"300px", gap:"10px"}

2, 指定子项列数

{columns:3, gap:"10px"}

3, 指定子项宽度，和最小间距

{width:"300px", minGap:"10px"}

4，兼容 px em rem %多种宽度单位

{width:"300px", minGap:"10em"}

{width:"300rem", minGap:"1%"}

5, 监听滑动到底事件

waterFall.addEventListener("touchbottom", function(e) {})

6, 显示隐藏 loading

waterFall.showLoading();
waterFall.hideLoading();

7, 更新视图

waterFall.update();

8, 使用示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>waterfall test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #container .water-fall-item {
        border: 1px solid #f00;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="../dist/waterfall.js"></script>
    <script>
      var txt =
        "因遭受该男子暴打，吴巨轮面部有血迹，头部出现明显不适，随后被送往医院进行医疗。据接诊的湖南航天医院急诊科主任黄扩军介绍，吴巨轮头部软组织损伤，有脑震荡体现，需住院观察医治。横遭此祸，吴巨轮感觉很冤枉，因为按照有关规定，他实在不能在同一个站点进行二次停泊。387路公交所属的长沙众旺有限责任公司运营科科长戴勇表示，按照行业规章，在同一个站点进行二次停泊或站外停靠都是违纪行为，因为这样会影响其他公交车进出站和一般车辆的通畅。针对年轻男子的打人行为，该公司选择了报警。20日，岳麓公安分局公布通知称，11月18日上午，一男子在搭乘387路公交时，因不满司机的服务态度，置车上乘客的性命于不顾，在车辆行进过程中暴打公交司机吴某，随后逃离现场。接到报警后，岳麓公安分局观沙岭派出所迅速展开初步调查，于11月20日8时将肇事男子夏某智归案。潇湘晨报记者了解到，夏某智是长沙本地人，也是公共交通行业的工作者，是一名的士司机。夏某智在警局内接受媒体采访时称，“我们上车看到司机的表情很不情愿，那个年纪大的乘客一直在跟他吵，司机说话也不好听”，“现在特别后悔，确实是自己太冲动了，没事找事似的”。现在夏某智涉案以危险方法危害公共安全犯罪被刑事拘留，案件还在进一步处理中。";
      function getTxt() {
        var len = Math.floor(Math.random() * txt.length);
        var start = Math.floor(Math.random() * (txt.length - len));
        return txt.substr(start, len);
      }
      var pageSize = 16;
      function initContent() {
        var container = document.getElementById("container");
        container.innerHTML = "";
        addPageContent();
      }
      function addPageContent() {
        for (var i = 0; i < pageSize; i++) {
          container.insertAdjacentHTML("beforeend", "<div></div>");
          var item = container.lastChild || container.lastElementChild;
          item.innerHTML = getTxt();
        }
      }
      initContent();

      var waterFall = WaterFall.builder(document.getElementById("container"), {
        minWidth: "300px",
        gap: "10px"
      });
      waterFall.addEventListener("touchbottom", function(e) {
        waterFall.showLoading();
        setTimeout(function() {
          addPageContent();
          waterFall.update();
          waterFall.hideLoading();
        }, 1000);
      });
    </script>
  </body>
</html>