知识点
瀑布流原理：外层一个大的div，里面的小div相对父盒子进行绝对定位。第一行定位完成后，第二行第一个接在第一行高度最矮的一个下面，以此类推。eq(N)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。jQuery.inArray() 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。$(’’)新建元素appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。代码
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流效果</title><link rel="stylesheet" href="css/index.css"></head><body><!--父盒子--><div id="main"><!--子盒子--><div class="box"><div class="pic"><img src="images/0.jpg"></div></div><div class="box"><div class="pic"><img src="images/1.jpg"></div></div><div class="box"><div class="pic"><img src="images/2.jpg"></div></div><div class="box"><div class="pic"><img src="images/3.jpg"></div></div><div class="box"><div class="pic"><img src="images/4.jpg"></div></div><div class="box"><div class="pic"><img src="images/5.jpg"></div></div><div class="box"><div class="pic"><img src="images/6.jpg"></div></div><div class="box"><div class="pic"><img src="images/7.jpg"></div></div><div class="box"><div class="pic"><img src="images/8.jpg"></div></div><div class="box"><div class="pic"><img src="images/9.jpg"></div></div><div class="box"><div class="pic"><img src="images/10.jpg"></div></div><div class="box"><div class="pic"><img src="images/11.jpg"></div></div><div class="box"><div class="pic"><img src="images/12.jpg"></div></div><div class="box"><div class="pic"><img src="images/13.jpg"></div></div><div class="box"><div class="pic"><img src="images/14.jpg"></div></div><div class="box"><div class="pic"><img src="images/15.jpg"></div></div><div class="box"><div class="pic"><img src="images/16.jpg"></div></div><div class="box"><div class="pic"><img src="images/17.jpg"></div></div><div class="box"><div class="pic"><img src="images/18.jpg"></div></div><div class="box"><div class="pic"><img src="images/20.jpg"></div></div><div class="box"><div class="pic"><img src="images/21.jpg"></div></div><div class="box"><div class="pic"><img src="images/22.jpg"></div></div><div class="box"><div class="pic"><img src="images/23.jpg"></div></div><div class="box"><div class="pic"><img src="images/24.jpg"></div></div></div><script src="js/jquery-3.3.1.js"></script><script src="js/index.js"></script></body></html>
css
*{padding: 0;margin: 0;}/*父盒子*/#main{/*绝对定位*/position: relative;}/*子盒子*/.box{/*background-color: red;*//*浮动*/float: left;/*内边距*/padding:15px 0 0 15px;}.pic{/*边框*/border:1px solid #dddddd;/*内边距*/padding: 10px;background-color: white;/*圆角*/border-radius: 5px;}.pic img{width: 165px;}
js
$(function () {// 1. 实现瀑布流布局waterFull();// 2. 动态加载新的盒子$(window).on('scroll', function () {// 2.1 判断是否具备加载的条件if (checkWillLoadImage()) {// trueconsole.log(1111);// 2.2 造数据var dataArr = [{'src': '0.jpg'},{'src': '3.jpg'},{'src': '4.jpg'},{'src': '7.jpg'},{'src': '8.jpg'},{'src': '10.jpg'},{'src': '12.jpg'},{'src': '30.jpg'}];// 2.2 遍历假数据, 不断加载$.each(dataArr, function (index, value) {// 1. 创建标签var newBox = $('<div>').addClass('box').appendTo($('#main'));var newPic = $('<div>').addClass('pic').appendTo($(newBox));$('<img>').attr('src', 'images/' + $(value).attr('src')).appendTo($(newPic));console.log($(value).attr('src'));});// 2.3 重新布局waterFull();}})});/*** 实现瀑布流的布局*/function waterFull() {// 1. 求出父盒子的宽度// 1.1 获取所有的子盒子var allBox = $('#main>.box');// 1.2 求出子盒子的宽度var boxWidth = allBox.eq(0).outerWidth();// 1.3 获取窗口的宽度var clientW = $(window).width();// 1.4 求出总列数var cols = Math.floor(clientW / boxWidth);// 1.5 父盒子居中$('#main').css({width: cols * boxWidth + 'px',margin: '0 auto'});// 2. 子盒子定位// 2.1 定义变量var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0;// 2.2 遍历所有的子盒子$.each(allBox, function (index, value) {// 2.2.1 求出每一个子盒子的高度boxHeight = $(value).outerHeight();// 2.2.2 取出第一行盒子的高度放入高度数组中if (index < cols) {// 第一行heightArr.push(boxHeight);} else {// 剩余行的盒子// 2.2.3 取出数组中最矮的高度minBoxHeight = Math.min.apply(this, heightArr);// 2.2.4 求出最矮高度对应的索引minBoxIndex = $.inArray(minBoxHeight, heightArr);// 2.2.5 盒子定位$(value).css({position: 'absolute',left: minBoxIndex * boxWidth + 'px',top: minBoxHeight + 'px'});// 2.2.6 更新最矮的高度heightArr[minBoxIndex] += boxHeight;}});}/*** 判断是否具备加载子盒子的条件* @returns {boolean}*/function checkWillLoadImage() {// 1. 获取最后一个盒子var lastBox = $('#main>.box').last();// 2. 求出高度var lastBoxDis = $(lastBox).outerHeight() * 0.5 + $(lastBox).offset().top;// 3. 求出窗口的高度var clientH = $(window).height();// 4. 求出页面滚动产生的高度var scrollTopH = $(window).scrollTop();// 5. 对比return lastBoxDis <= clientH + scrollTopH;}
运行结果
不断延伸
