# cascade-flow

**Repository Path**: zhuzhaofeng/cascade-flow

## Basic Information

- **Project Name**: cascade-flow
- **Description**: 基于jQuery 瀑布流插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 21
- **Forks**: 5
- **Created**: 2019-05-26
- **Last Updated**: 2023-11-12

## Categories & Tags

**Categories**: jquery-plugins

**Tags**: None

## README

# cascade-flow

## 基于jQuery 瀑布流插件

- 使用:

  1. html部分

  ```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](https://lib.baomitu.com/jquery/3.3.1/jquery.min.js),[cascade-flow.js](./js/cascade-flow.js)
  
  ```htm
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/cascade-flow.js"></script>
  ```
  
  3. 调用插件
  
  ```javascript
  $('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 5 });
  ```

- 参数：

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

- 示例:

![1-1](./example/1-1.png)

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

![1-2](./example/1-2.png)

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

![1-3](./example/1-3.png)

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

- 在线demo

[点击预览](https://zhuzhaofeng.gitee.io/cascade-flow/)

> zhuzhaofeng  2019年05月26日