custom-waterfall.zip

自定义瀑布流插件

    引入

<link rel="stylesheet" href="js/custom-waterfall/custom-waterfall.css">
<script src="js/custom-waterfall/custom-waterfall.js"></script>

    使用

html代码

    <div class="ul-custom-waterfall">
        <div class="waterfall">
           
            <div class="item">
                <div class="inner" style="animation-delay: .0s;">
                    <div class="txt">
                        <h1>标题</h1>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner" style="animation-delay: .1s;">
                    <div class="pic">
                        <img data-src="images/e-pic9.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner" style="animation-delay: .2s;">
                    <div class="pic">
                        <img data-src="images/e-pic15.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner" style="animation-delay: .3s;">
                    <div class="pic">
                        <img data-src="images/e-pic18.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="inner" style="animation-delay: .4s;">
                    <div class="pic">
                        <img data-src="images/e-pic9.jpg" alt="">
                    </div>
                    <h3>标题</h3>
                </div>
            </div>
        </div>
        <div class="loadmore-box">加载更多</div>
        <div class="loading-box">加载中...</div>
        <div class="finish-box">没有更多了</div>
    </div>

javascript

<script>
    $(document).ready(function () {
        // 模拟ajax请求
        function addMoreItem() {

            for (var i = 0; i < 6; i++) {
                // 随机图片资源
                var imgsrc = "http://placekitten.com/g/" + Math.floor(200 + Math.random() * 300) + "/" + Math.floor(200 + Math.random() * 300);

                var html = '<div class="item"><div class="inner" style="animation-delay: ' + (0.2 * i) + 's;"><div class="pic"><img data-src="' + imgsrc + '" alt=""></div></div></div>'
                $('.ul-custom-waterfall .waterfall').append(html);
            }
            $('.ul-custom-waterfall').waterfall('draw');

        }
        $('.ul-custom-waterfall').waterfall({
            reachBottom: function (el, callback) {
                addMoreItem();
            }
        });
    });
</script>

配置项

        
        //一行几列
        col: 4,
        //响应式代码,breakpoint代表最大高，从上到下排列，顺序可以乱，做的有排序功能，setting里改变列数
        breakpoints: [
          {
            breakpoint: 1440,
            setting: {
              col: 3
            }
          },
          {
            breakpoint: 1199,
            setting: {
              col: 2
            }
          },

          {
            breakpoint: 768,
            setting: {
              col: 1
            }
          },
        ],
        //页面滚动到底部，会触发这个函数，默认不会触发，用于上拉加载更多，如果没用到可以不配置
        reachBottom: function (el, callback) {
        }

方法

$('.ul-custom-waterfall').waterfall('draw');

类似于slick插件的触发方式https://www.jq22.com/jquery-info406,  draw方法用于ajax请求结束之后绘制新加载的html，如果用vue的话，需要放到$nextTick()里执行，需要等结构加载结束（html渲染结束，不需要等图片加载），才能执行draw方法；

示例可以看：

http://test.h5.org.cn/fanqie/zidingyipubuliu/www/%E7%80%91%E5%B8%83%E6%B5%81%E6%8F%92%E4%BB%B6.html

示例代码

1699864606000.zip