jquery 实现瀑布流 动态获取服务端数据 以及滚动加载服务端数据

1. html+css部分

<div class="container">
    <div class="items">
    </div>
    <div class="btn">点击加载</div>
</div>

       .container {
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .items {
            position: relative;
        }

        .item {
            width: 232px;
            position: absolute;
            left: 0;
            top: 0;
            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
        }

        .item img {
            display: block;
            width: 100%;
            height: 300px;
        }    
        .item:nth-child(4) img {
            height: 400px;
        }

        .item:nth-child(2) img {
            height: 100px;
        }

        .item:nth-child(3) img {
            height: 300px;
        }

        /*按钮的样式.*/
        .container > .btn {
            width: 280px;
            height: 40px;
            margin: 30px auto;
            text-align: center;
            line-height: 40px;
            background-color: #CCC;
            border-radius: 6px;
            font-size: 24px;
            cursor: pointer;
        }

        .container > .loading {
            background-color: transparent;
        }

2. jquery 实现瀑布流布局

/**
 * @author  zsw
 * @date  2019/7/17 20:40
 * @version 1.0
 */
$.fn.waterfall = function () {
    let $items = $(this);
    //获取父容器宽度
    let parentWidth = $items.width();
    //获取所有子元素 item
    let $childRen = $items.children(".item")
    //获取所有子元素 宽度
    let  width = $childRen.width();
    // 设置每一行有多少子元素 后期可以根据浏览器的宽度来计算每行摆放多少个
    let column = 5;
    //获取元素间的间隔
    let space = (parentWidth-column*width)/(column-1)
    let arr = [];
    $childRen.each((index,item)=>{
        let $dom = $(item)
        if (index<5) {
            $dom.css({
                top:0,
                left:index*(space+width)
            })
            //保存第一行高度
            arr.push($dom.height())
        }else{
            let minIndex = 0;
            let minHeight = arr[minIndex];
            //对arr中的高度进行排序 找到最小值的高度
            for (let i = 0; i < arr.length; i++) {
                if (arr[i]<minHeight) {
                    minHeight = arr[i];
                    minIndex = i;
                }
            }
            $dom.css({
                left:minIndex*(width+space),
                top:minHeight+space
            })
            //重新赋值最小值的高度
            arr[minIndex] = minHeight+space+$dom.height();
        }

    })
//item中最高的高度 赋值给 items  设置按钮的位置
    let maxHeight =Math.max(...arr);
    $items.height(maxHeight)
}

3. 定义模板 解析后台传递过来的数据

 

   <!--关于这部分就不解释了 以前的文字里面有详细解释着模板的用法-->
    <script src="js/template-web.js"></script>
    <script type="text/html" id="templateId">
        {{each rows as item}}
        <div class="item">
            <img src="{{item.lifephoto}}" alt="./">
            <p>
                {{item.username}}
            </p>
        </div>
        {{/each}}
    </script>

4. 定义一个对象 实现数据的动态加载  和 滚动加载数据

//避免和外界js产生冲突 
(function (hb) {
        let cssmhb = {
            config: {
        // 传递到后台的参数
                params: {
                    page: 1,
                    pageSize: 5
                }
            },
            init: function () {
                this.render()
                this.initEvent();
            },
            render: function () {//获取数据
                let _this = this;
                $.ajax({
                    type: "get",
                    url: "http://kkb_day.zsw/teacherManage/api/queryTeacher.php",
                    data: {
                        page: _this.config.params.page,
                        pageSize: _this.config.params.pageSize
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.rows.length == 0) {
                            //说明没有更多的数据.
                            $(".btn").text("没有更多的数据了.");
                            return;
                        }
                        var html = template("templateId", data);

                        //获取到元素网页面上面放，然后定位.
                        $(".items").append(html).waterfall();
                        //数据已经渲染完成
                        $(".btn").removeClass("loading").text("点击加载");
                    }
                })
            },
            initEvent: function () {
                let _this = this;
                //点击加载数据
                hb(".btn").on("click", function () {
                    //放置重复提交
                    if ($(this).hasClass("loading")) return;
                    $(this).addClass("loading").text("正在加载中............");
                    _this.config.params.page += 1;

                    _this.render();
                });
                //滚动加载数据
                hb(window).on("scroll", function (ev) {
                    
                    //内容区域高度
                    let contentHeight = hb(document).height();
                    //窗口高度
                    let winHeight = hb(window).height();
                    let top = hb(this).scrollTop();
                    if (contentHeight-(winHeight+top)<40){
                       console.log("已经到底部了");
                       //出发加载按钮的点击事件
                        $(".btn").click()
                   }
                });

            }

        }
        
        cssmhb.init();
    })($)

 

 5. 关于后台的php代码 我写的上一篇文章有记载  https://blog.csdn.net/qq_43512502/article/details/96200457