11 Star 20 Fork 3

zhuzhaofeng / cascade-flow

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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>
    1. 引入jquery,cascade-flow.js
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/cascade-flow.js"></script>
    1. 调用插件
    $('#cascade-flow-wrapper').cascadeFlow({ width: 220,col: 5 });
  • 参数:

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

1-1

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

1-2

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

1-3

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

点击预览

zhuzhaofeng 2019年05月26日

Repository Comments ( 2 )

Sign in for post a comment

About

基于jQuery 瀑布流插件 expand collapse
JavaScript and 2 more languages
Cancel

Releases

No release

cascade-flow

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://git.oschina.net/zhuzhaofeng/cascade-flow.git
git@git.oschina.net:zhuzhaofeng/cascade-flow.git
zhuzhaofeng
cascade-flow
cascade-flow
master

Search