是开头都会说的原理

瀑布流布局有两种，一种是固定列，一种是非固定列。在此主要记述第一种的实现。

固定列的特征是：无论页面如何缩放，每行的总列数都一致。

一行4列的瀑布流从布局的角度来说，就是4个li标签。通过一定的事件（比如滚动条滚动多少px），然后读取之，再把数据动态地添加到页面中。

添加数据原则，不是根据li索引值来加，而是根据各列中高度最短的的那列动态添加。否则可能导致页面很难看（左右高度不统一）。

实例涉及ajax方法。可在服务器环境下运行。

废话不多说了。直接上样式。

css

基本效果如图：

样式显示没问题之后，就把li里面的代码删掉。

接下来通过ajax来动态添加。

数据哪里来？

这里用的是wookmark的数据接口。

http:///api/json/popular?page='+num+'&callback=?';}var bCheck=false;function getList(n){ $.getJSON(createUrl(n),function(data){ if(data.length==0){ return false; }else{ for(var i=0;i<data.length;i++){ //console.log(data[i].preview); var $html=$('<div><img src="'+data[i].preview+'"><p>'+data[i].title+'</p></div>'); $('li').eq(getShortestLi()).append($html); $html.find('img').css('height',(data[i].height*225/data[i].width)+'px'); $html.find('img').css('width','225px'); }; } bCheck=true; });}$(function(){ var pageNum=1; getList(pageNum); $(window).scroll(function(){ var $li=$('li').eq(getShortestLi()); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop]) //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离 if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){ if(bCheck){ bCheck=false; pageNum++; //console.log(pageNum); getList(pageNum); }else{ return false; } } })})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！