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
