瀑布流原来这么简单

  1. 上周
    2

    实现瀑布流
    1. 简介
    采用 jquery 的 waterfall 插件,下面是 waterfall 的源码,源码不多,直接贴出来,新建文件复制代码,既可以使用。

    2. 使用方法
    定义一个放图片的 div,注意此时的 my_container 就是该容器,该容器初始内容一定要超过屏幕高度,不然没有滚动条,不能触发加载函数。

    引用 js 文件和写 js

    <div class="text-center my_container">
            <div class="box">
                <img src="/imgs/detail/top.jpg">
            </div>
    
            <div class="box">
                <img src="/upload/pic/2019-09-03/1567491229-gOYDHq5y.jpg">
            </div>
    
            <div class="box">
                <img src="/upload/pic/2019-09-03/1567491229-gOYDHq5y.jpg">
            </div>
            <div class="box">
                <img src="/upload/pic/2019-09-03/1567491401-YJS4RPt1.jpg">
            </div>
        </div>
    <script src="/js/waterfall.js"></script>
        <script type="text/javascript">
            $(".my_container").waterfall({
                itemClass: ".box",  //img 外层的div类名
                minColCount: 1, // 每行最少几个块
                spacingHeight: 10, //块之间的间隔高度
                resizeable: true, //屏幕大小改变时,块的大小是否可以改变
                ajaxCallback: function (success, end) {// 下拉刷新时的行数
                    var data = {
                        "data": [
                            {"src": "/imgs/detail/introduction_us.jpg"}, {"src": "/imgs/detail/introduction_10.jpg"},
                            {"src": "/imgs/detail/introduction_1.jpg"}, {"src": "/imgs/detail/introduction_5.jpg"},
                            {"src": "/imgs/detail/introduction_3.jpg"}, {"src": "/imgs/detail/introduction_7.jpg"}
                        ]
                    }; //data 可以通过ajax请求获取代替,这里为了演示,将数据写死。
                    var str = "";
                    var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="test" /></div></div>';//只是为了方便添加元素写成这样,可以直接在 用for循环 append()元素。
                    for (var i = data.data.length - 1; i > 0; i--) {
                        str += templ.replace("test", data.data[i].src);
                    }
                    $(".my_container").append(str);
                    success();
                    end();
                }
            });
        </script>

    tips 贴一下类样式

    <style>
            .my_container {
                margin: auto;
                position: relative;
            }
            @media screen and (max-width: 768px) {
                .my_container {
                    width: 100%;
                }
            }
            .box:hover {
                box-shadow: 0 0 10px #999;
            }
            .box img {
                max-width: 100%;
            }
            .box {
                float: left;
                padding: 10px;
                border: 1px solid #ccc;
                background: #f7f7f7;
                box-shadow: 0 0 8px #ccc;
                width: 500px;
            }
            @media screen and (max-width: 768px){
                .box{
                    width: 100%;
                }
            }
        </style>

或者 注册后参与话题.