瀑布流是我们经常会见到的东西，一直刷新一直有，其实它实现起来是很简单的。具体代码如下
1、css代码
<style> ???????????*{ ???????????????margin: 0; ???????????????padding: 0; ???????????} ???????????.container{ ???????????????position: relative; ???????????} ???????????.container .box{ ???????????????float: left; ???????????????padding:15px 0 0 15px; ???????????} ???????????.container .box .pic{ ???????????????border:1px solid #ccc; ???????????????padding:10px; ???????????????border-radius: 5px; ???????????????box-shadow: 0 0 8px #ccc; ???????????} ???????????.container img{ ???????????????width:150px; ???????????} ???????</style>2、html代码
<div class="container"> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/1.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/2.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/3.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/4.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/5.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/6.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/7.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/8.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/9.jpg" alt="" /></div> ???????????</div> ???????????<div class="box"> ???????????????<div class="pic"><img src="images/10.jpg" alt="" /></div> ???????????</div> ???????</div>
3、javascript代码
<script> ???????????$(window).on("load",function(){ ???????????????waterfall(); ???????????????var dataInit = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}; ???????????????$(window).scroll(function(){ ???????????????????if(checkScroll()){ ?//满足加载条件 ???????????????????????$.each(dataInit.data,function(index,value){// ???????????????????????????console.log(value["src"]) ???????????????????????????var $b = $("<div class=‘box‘></div>"); ???????????????????????????var $pic = $("<div class=‘pic‘></div>"); ???????????????????????????var $img = $("<img />"); ???????????????????????????$img.attr("src","images/" + value["src"]); ???????????????????????????$img.appendTo($pic); ???????????????????????????$pic.appendTo($b); ???????????????????????????$b.appendTo($(".container")); ???????????????????????}); ???????????????????} ???????????????????waterfall(); ???????????????}); ???????????????$(window).resize(function(){ ???????????????????waterfall(); ???????????????}); ???????????}); ???????????????????????function waterfall(){ ???????????????var $box = $(".container>.box"); ???????????????var $bW = $box.first().outerWidth();//获取一个box的宽度 ???????????????var $vW = $(window).outerWidth();//获取浏览器宽度 ???????????????var $cols = parseInt($vW / $bW);//整个浏览器最多能排的列数 ???????????????var hArr = []; ???????????????$(".container").css({"width":$bW * $cols,"margin":"0 auto"}); ???????????????$box.each(function(i,val){ ???// ???????????????var $bH = $(this).outerHeight();//获取每一个box的高度 ???????????????????if(i < $cols){ ?//遍历的下标 ?小于 ?列数 ??第一行 ???// ???????????????????hArr[i] = $(val).outerHeight(); ???????????????????????hArr.push($(val).outerHeight());//把第一行所有的box的高度放到数组 hArr里 ???????????????????????$(val).css({"position":"absolute","left":$bW * i,"top":0}); ???????????????????}else{ ???????????????????????var $minH = Math.min.apply(null,hArr);//hArr数组里最小的高度 ???// ???????????????????var $minIndex = $.inArray($minH,hArr); ???// ???????????????????$.inArray(元素,数组) 用来查找元素在整个数组中所处的位置 ?返回值是一个下标 ???????????????????????var $minIndex = getIndex($minH);//最小高度所对应的下标 ???????????????????????$(val).css({"position":"absolute","top":$minH,"left":$minIndex * $bW}); ???????????????????????hArr[$minIndex] = hArr[$minIndex] + $(val).outerHeight();//更新数组中最小的那个高度 ???????????????????} ???????????????}); ???????????????//获取高度最小的下标 ???????????????function getIndex(h){ ???????????????????for(var j = 0;j < hArr.length;j++){ ???????????????????????if(hArr[j] == h){ ???????????????????????????return j; ???????????????????????} ???????????????????} ???????????????} ???????????} ???????????//检测加载条件 ???????????function checkScroll(){ ???????????????var $sT = $(window).scrollTop();//滚动条向上卷去的距离 ???????????????var $vH = $(window).outerHeight();//浏览器的高度 ???????????????var $box = $(".container>.box"); ???????????????var $offT = $box.last().offset().top;//获取最后一个box距离文档的偏移量 ???????????????var $bH = $box.last().outerHeight();//获取最后一个box的高度 ???????????????if(($vH + $sT) > ($offT + $bH / 2)){ ???????????????????return true; ???????????????}else{ ???????????????????return false; ???????????????} ???????????} ???????????????</script>4、注意一定要引入本地的jQuery代码
例如：<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
前端jQuery实现瀑布流
原文地址：https://www.cnblogs.com/chongzixing/p/8961677.html