cascade-flow

基于jQuery 瀑布流插件

• 使用:

  1. html部分

  <!-- 写一个容器，添加几个子元素，子元素 class 必须为 cascade-flow-item  -->
  <div id="cascade-flow-wrapper" class="cascade-flow-wrapper">
      <div class="cascade-flow-item">1</div>
      <div class="cascade-flow-item">2</div>
      <div class="cascade-flow-item">3</div>
      <div class="cascade-flow-item">4</div>
      <div class="cascade-flow-item">5</div>
      <div class="cascade-flow-item">6</div>
      <div class="cascade-flow-item">7</div>
      <div class="cascade-flow-item">8</div>
      <div class="cascade-flow-item">9</div>
  </div>
  2. 引入jquery,cascade-flow.js

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/cascade-flow.js"></script>
  3. 调用插件

  $('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 5 });

• 参数：

  参数	说明	默认值
  width	每列宽度	200
  col	列数	3
  my	上下边距	5
  mx	左右边距	5

• 示例:

$('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 3 });

$('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 4 });

$('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 5 });

• 在线demo

点击预览

zhuzhaofeng 2019年05月26日