思路：
style:
<style type="text/css"> body,html{ margin: 0; padding:0; } #container{ position: relative; margin: 0 auto; text-align: center; } #container div{ padding: 10px; position: absolute; } #container div img{ padding: 10px; width: 200px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; } </style>
html:
<div id="container"> <div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> <div><img src="images/3.jpg"></div> <div><img src="images/4.jpg"></div> <div><img src="images/5.jpg"></div> <div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> <div><img src="images/3.jpg"></div> <div><img src="images/4.jpg"></div> <div><img src="images/5.jpg"></div> <div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> <div><img src="images/3.jpg"></div> <div><img src="images/4.jpg"></div> <div><img src="images/5.jpg"></div> <div><img src="images/1.jpg"></div> <div><img src="images/2.jpg"></div> </div>
瀑布流就是等宽不等高的元素进行排列;从第二行开始元素从第一行中高度的数组中获取高度最小的元素开始排列，然后把两个元素合并为一个元素，再次从数组中取出高度最小的值，依次类推
1 需要对所有的元素进行定位absolute；
2 定义子元素的宽度以及padding值，利用outerWidth() 获取元素的宽度（包含padding，不包含margin）；
3 获取屏幕的宽度，第一个子元素的宽度（所有的元素等宽），两者取模向下取整数，获取每行的元素的个数 cols；
4 获取第一行子元素的高度值为一个数组 HArr
5 获取数组中的最小值以及最小值的index（就是获取第一行高度最小的元素以及位置）
6 第cols+1个元素的位置就在第一行高度最小的元素的下方
7 修改HArr最小值为原值与第cols+1个元素的高度
8 依次类推
瀑布流定位元素的位置:
function waterFall(){ var childs=$(‘#container div‘); var CWidth=$(childs[0]).outerWidth(); var cols=Math.floor($(window).width()/CWidth); $(‘#container‘).width(CWidth*cols); var hArr=[]; childs.each(function(index,item){ if(index<cols){ hArr.push($(item).outerHeight()); $(item).css({ left:index*CWidth+‘px‘, top:0+‘px‘ }); }else{ var minH=Math.min.apply(null,hArr); var mIndex=$.inArray(minH,hArr); $(item).css({ left:mIndex*CWidth+‘px‘, top:minH+‘px‘ }); hArr[mIndex]+=$(item).outerHeight(); } }); }
当鼠标滚动到页面底部时开始加载更多的数据：
判断鼠标滚动的位置：
function checkScrollBottom(){ var wHeight=$(window).height()+$(window).scrollTop(); var lastItem=$("#container>div").last(); var lastP=lastItem.offset().top+($(lastItem).outerHeight()/2); console.log($("#container>div").last()); return wHeight>lastP?true:false }
加载更多的数据：
function addData(){ console.log(‘addData‘); for(var i=1; i<6; i++){ $(‘#container‘).append(‘<div><img src="images/‘+i+‘.jpg"/></div>‘); } waterFall(); }
window.onload=function(){ waterFall(); } window.onscroll=function(){ console.log(checkScrollBottom()); if(checkScrollBottom()){ addData(); }else{ waterFall(); } }
原文：https://www.cnblogs.com/xiaofenguo/p/10609088.html