jquery实现简单的瀑布流布�

这就是开头要说的原则

瀑布流布局有两种，一种是固定柱，一种是非固定柱。这里主要描述第一种方法的实现。

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

从布局来看，四列一排的瀑布流就是四里标签。传递一个特定的事件(比如滚动条滚动多少px)，然后读取它，然后将数据动态添加到页面中。

添加数据的原则不是根据li索引值进行添加，而是根据每列中高度最短的列进行动态添加。否则，页面可能会很难看(左右高度不一致)。

例子与ajax方法有关。它可以在服务器环境下运行。

废话少说。风格直接。

ul id=' ul1 ' Li div mg src=' http : images/1 . jpg ' p我是文本描述我是文本描述/p/div/Li div mg src=' http : images/2。jpg' pI是文本描述我是文本描述我是文本描述我是文本描述/p/div/Li lidiv img src=' http : images/3 . jpg ' pI是文本描述我是文本描述我是文本描述我是文本描述/p/div/Li div img src=' http : images/4 . jpg ' p我是文本描述我是文本描述我是文本描述我是文本描述/p /div /li /ulcss

* { margin:0padd : 0；} ul Li { list-style : none；} # ul1 { width: 1080pxmargin: 100px自动0；} li { width: 247px向左浮动：margin-right : 10px；} Li div { border :1 px solid # 000；padding:10px边距-bottom :10 px；} li div img { width: 225pxdisplay:块；}基本效果如图所示：

样式显示没有问题后，删除li中的代码。

然后通过ajax动态添加。

数据从何而来？

这里使用了Wookmark的数据接口。

http://www.wookmark.com/api/json/popular?页面=1

点击网址获取一个json。

有很多信息。怎么分析？

一般可以看文档。但是如果你手头没有文档，你可以看看链接。到底是什么回来了？

函数createURl(num){ return ' http://www . wookmark.com/API/JSON/popular？page=' num '回调=？}$(function(){ $。getJSON(createUrl(1)，函数(数据){ console.log(数据)；})})控制台打印结果为：

原来是50张图片信息的数组。每个数组元素都是一个json。在这个简单的演示中，暂时只取预览属性和标题属性。

布局实现

关键之一是判断最短的li。事实上，我们需要最短高度li的指标值。

//找出索引值函数getshortly Li(){ varshortly=0；for(var I=1；i4；i ){ if($('li ')。eq(i)。高度()$('li ')。eq(最短)。高度()){最短=I；} }返回最短；}然后是getJSON方法

$(function(){ $)。getJSON(createUrl(1)，函数(数据){ //console.log(数据)；for(var I=0；idata arr . length；I){ var $ html=$(' div mg src=' http : '数据[i]。预览“p”数据[i]。title '/p/div ')；//console.log($('li ')。eq(getShortestLi())。height()) $('li ')。eq(getShortestLi())。追加($ html)；};Console.log ([$ ('Li '))。eq (0)。height()，$ ('Li ')。等式(1)。height()，$ ('Li ')。等式(2)。height()，$ ('Li ')。情商(3)简单而美好。

当我们到达这里时，一切似乎都很好。然而，一个致命的问题潜伏着。

森林循环带来的麻烦？

查看控制台日志中的信息.为了分析，我把四里高地排成一个阵列：

这50张图片分为四列，平均高度应该是三四千像素。

到循环结束时，程序判断的终点仅超过1,000 px，因为图像加载过程比for循环执行速度慢。虽然演示中的显示正常，但是这个代码在网速不好的时候会导致工作事故。

想法一：可以判断图片是否加载。

您可以使用计时器来监听，然后递归地实现它。我的计划是这样的

var索引=0；函数LoadPic(index){ var $ html=$(' div mg src=' http : ' data[index]。预览“p”数据[索引]。title '/p/div') $('li ')。eq(getShortestLi())。追加($ html)；var oImg=$ html . find(' img ')；var t=setInterval(function(){ if(oimg . height()！=0){//如果加载完成。clearInterval(t)；//console.log([$('li ')。eq(0)。height()，$('li ')。等式(1)。height()，$('li ')。等式(2)。height()，$('li ')。等式(3)。height()])if(index 50){ return LoadPic(index 1)；} else { return false}} else {console.log ('wait')}}，50)//每隔50毫秒侦听一次} LoadPic(0)；但是从用户体验的角度来看，等待一张图片加载后再加载下一张是不友好的。数据提供者应该直接处理服务器上图片的高度，并在json数据中返回。网速慢的时候要等很久，然后所有的图片一下子就出来了。你不觉得很奇怪吗？尤其是第三方接口。一旦无法加载，就会出现大问题。

幸运的是，第三方提供了图片宽度和高度的信息。

因此，for循环仍然可以存在，并且返回的数据中有宽度和高度值。通过使用它们，我们可以实现固定宽度(255px)和固定高度(原始高度乘以一个比率)。

$(function(){ $)。getJSON(createUrl(1)，函数(数据){ console.log(数据)；for(var I=0；idata.lengthi ){ //console.log(数据[i]。预览)；var $ html=$(' div mg src=' http : '数据[i]。预览“p”数据[i]。title '/p/div') $('li ')。eq(getShortestLi())。追加($ html)；$html.find('img ')。css('height '，(数据[i])。身高* 225/数据[i]。宽度)' px ')；$html.find('img ')。css('width '，' 225 px ')；};//console.log ([$ ('Li '))。eq (0)。height()，$ ('Li ')。等式(1)。height()，$ ('Li ')。等式(2)。height()，$ ('Li ')。情商

有了瀑布，你需要流动

流动逻辑

下拉(滚动)，底部进入可见区域的第一个li将首先被加载。

换句话说，当最短li高度和到页面顶部的li之和小于滚动条高度和可视区域高度之和时，触发li加载。

李的身高不错。但是如何获得从li到页面顶部的最短距离呢？

本机方法可以按如下方式实现：

函数getTop(obj){ var ITop=0；while(obj){ iTop=obj . offsettop；obj=obj.offsetParent}//累加元素本身及其所有父元素的高度偏移量返回值iTop}但是既然在这种情况下使用了jquery，自然就有了它的方法。

obj.offset()。顶端

滚动事件

本机实现方法是：window . onscroll=function(){ 0.}

jquery的实现方法是： $ (window)。滚动(函数(){ 0.})

现在验证编写的代码是否正常。

(窗口)。scroll(function(){ var $li=$('li '))。eq(getShortestLi())；var scroll top=document . document element . scroll top | | document . body . scroll top；//console.log([$li.offset()。top $li.height()，document . document element . client height scroll top])//如果li的高度和li到页面顶部的高度之和，则可视区域高度的滚动距离为if ($ li.offset()。top $ Li . height(). document element . client height scroll top){ alert(1)；}})运行代码，当发现第一个li出现在可见区域时，1。证明它是可用的。

因为涉及滚动事件，所以getJSON相关函数应该封装为getList()以便于调用。所以需要重新调整。

此时的代码是这样的：

//找出高度最小里的索引值函数getShortestLi(){ var最短=0;for(var I=1；i4；i ){ if($('li ').方程式(I ).高度()$('li ').eq(最短)。高度()){最短=我；} }返回最短；}函数create URl(num){ 0返回'http://www.wookmark.com/api/json/popular？page=' num '回调=?'；}函数getList(n){ $ .getJSON(createUrl(n)，函数（数据){ //console.log(数据);for(var I=0；idata . LengiI){ var $ html=var $ html=$(' div mg src=' http : '数据[i].预览“p”数据[i].title '/p/div ')；//console.log(数据[i]).高度);$('li ').eq(getShortestLi()).追加($ html)；数据Arr[i].高度*=225/dataArr[i].宽度；$html.find('img ').css('height '，dataArr[i]).高度px '；$html.find('img ').css('width '，' 225 px ')；};} $(function(){ var page num=1；getList(页码)；$(窗口)。卷轴(函数(){ var $li=$('li ')).eq(getShortestLi()；var滚动顶部=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；if($li.offset().李。高度()。文档元素。客户端高度滚动顶部){页码；控制台。日志(页码)；getList(页码)；} })})这样一来，好像可以实现了。但是一看控制台的控制台。日志，又发现问题。

如厕的逻辑

在触发加载前提时，图片正在加载，期间动了滚动条，就又触发第二次加载，再动一下，就触发第三次，于是短短一瞬间，触发了n次加载。

那就做一个开关吧。

就跟公厕逻辑一样n。个人排队进一个坑位。外面的人想要进去首先得判断门是否锁上了。没锁才能进。进去之后第一件事把门锁上。等如厕完毕，门就打开。后面的人才能进

新设置一个开关检查，默认为真的。

到触发加载条件时，还要判断b检查是否为真（门开),为真时才能触发getList()(如厕)。否则返回假(只能等)。

getList一开始就把b检查设为假（如厕前先锁门)。等到getList回调函数执行到尾声。再把b检查设为真（开门)。

这一段不贴代码了。

总有流完的一天。

当数据结束时（所有人上完厕所),就没有必要再进行加载了（自动把门锁上)。

所以在getJSON回调函数内锁门之后发现进来的是个空数组，那就进行判断，当获取到数据的长度为空时，直接返回false。那么b检查就永远关上了。

全部代码如下：

//找出高度最小里的索引值函数getShortestLi(){ var最短=0;for(var I=1；i4；i ){ if($('li ').方程式(I ).高度()$('li ').eq(最短)。高度()){最短=我；} }返回最短；}函数create URl(num){ 0返回'http://www.wookmark.com/api/json/popular？page=' num '回调=?'；} var bCheck=false函数getList(n){ $ .getJSON(createUrl(n)，函数(数据){ if(数据。长度==0){返回false} else { for(var I=0；idata.lengthi ){ //console.log(数据[i].预览);var $ html=$(' div mg src=' http : '数据[i].预览“p”数据[i].title '/p/div ')；$('li ').eq(getShortestLi()).追加($ html)；$html.find('img ').css('高度'，(数据[i]).身高* 225/数据[i].宽度)“px’)；$html.find('img ').css('width '，' 225 px ')；};} bCheck=true })；} $(function(){ var page num=1；getList(页码)；$(窗口)。卷轴(函数(){ var $li=$('li ')).eq(getShortestLi())；var滚动顶部=文档。文档元素。向上滚动| |文档。尸体。滚动顶部；//console.log([$li.offset().top $li.height()，文档。文档元素。客户端高度滚动顶部])//如果里高度与里到页面顶部的高度之和可视区高度滚动距离if($li.offset().李。高度()。文档元素。客户端高度滚动顶部){ if(Bcheck){ Bcheck=false；page num//控制台。日志(页码)；getList(页码)；} else { return false} } })})以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！