江西云控制展厅中控服务器描述：： 瀑布流功效顾名思义，就是像瀑布一样模仿水流的方向由上到下的将图片缓慢的加载呈现出来。瀑布流分为等高瀑布流和等宽瀑布流；瀑布流的利用场景常见于对多图片的呈现，为了缓解服务器的包袱，将图片分批进行呈现；就拿百度图片来说，利用的就是等高瀑布流的呈现功效；所有的图片高度雷同；跟着阅读器的下拉，当Y轴下拉框触底的时候就加载更多的图片；等宽瀑布流从视觉角度来说，更接近于现实生涯中的瀑布功效；每一个图片宽度雷同，高度错落有致；比如，我们平时在呈现网站建设案例的时候，就可以应用上；视觉上还是很不错的。功效如下 本期建站公司来分享的是：jquery通过ajxa配合php后端怎么实现瀑布流功效的？ 首先，我们需要了解下瀑布流的实现原理是怎么样的？瀑布流功效实现的根本原理：跟着页面的每次滚动触底操纵触发ajxa向后台请愿数据，然后将请愿回来的数据渲染到页面上；每进行一次滚动触底事件的发生就产生一次ajxa数据请愿，然后渲染数据；直到不在返回数据，则结束。所以根本步骤就是：1、判断页面触底；2、ajxa发送请愿；3、处置数据，渲染页面；下面我们来一步步的进行实现。 在实现瀑布流功效之前，我们需要先预备好数据；这里的数据预备也就是php后端对数据的实现。数据读取的实现其实也就是从数据库中读取数据，然后通过ajxa请愿返回给阅读器；其中要留神的是，在数据库查询数据的时候，每次查询的数据要保证不一样，我们就可以通过sql语句中limit来进行限制：比如说：(limit m n);m和n是通过get方式从前台传递过来的；n表示：每次请愿多少个？m表示：每次从第几个开端读取？只要保证m差异，就可以保证读取的数据差异了。m和n的管理，既可以写在后台进行处置，也可以在前台进行处置；每请愿一次数据，就对m进行操纵：m=m+n;这样下次的m就是不一样的值了。数据预备好之后，就可以开端实现性能了。 PHP代码： 下面我就上代码了 HTML+CSS代码： +css对照简朴，就是定义一个寄存图片的大容器；divaterfall；每一个图片盒子会被追加到这个div里 瀑布流功效的实现是通过jquery来处置的；分为差异的步骤来进行实现：我们先定义根本需要的参数：比如显示的列数，列与列之间的间隔、收取返回的数据等 第一步：ajxa请愿数据 通过ajxa我们可以通过php后台请愿到数据库里的数据；需要依据自身需要的参数来进行返回：其中：m和n不可少；请愿到数据了，就可以渲染到页面上了； 通过上面可以得出，瀑布流功效的核心难点在于：如何对图片进行排列；其根本的逻辑就是，先对第一排进行布局；布局好第一排之后，预备布局第二排；第二排第一个安放非常重；第二排的第一个要安放在第一排中高度最低的一个；打个比喻吧：第一排4个序号为：vik1,vik2,vik3,vik4;第一排布局好后，如果vik3的高度最低，那么第二排的vik5就安放在vik3的下面了；这个时候，vik1,vik2,(vik3+vik5),vik4;这4个又形成了新的高度，这个时候对这个高度再进行判断，找出最低的那个，如果是：vik4;那么第二排的第二个vik6就会安放到vik4的下面，这时候：vik1,vik2,(vik3+vik5),(vik4+vik6);又形成了新的高度依次进行轮回就这样直到最后的一个图片安放完成；首次渲染的功效就算完成了。通过getImageList();函数的调用就可以完成首次页面的渲染了。 第二步：阅读器触底实现数据加载 页面触底的原理其实很简朴：当可视区的高度+阅读器滚动条被卷进去的高度 == 整个页面的高度的时候，这个时候就表示页面触底了；每一次触底就发送依次ajax请愿，依据差异的m值来获取差异的数据，然后通过shoImg()函数的处置渲染到页面上；这里留心的时候，需要对m值进行处置：m=m+n;以保证每次请愿到差异的数据； 为了缓解服务器的包袱；我们还可以参加：图片懒加载的性能； 第三步：图片懒加载 图片懒加载其目标就是为了缓解服务器的包袱；分批请愿的同时分配进行加载；可以先采用纯色的色块进行占位；当其中某一个元素达到可视区范畴了，再将图片地址渲染上去； 途经以上的步骤，等宽瀑布流的性能就实现了。原创不易，各位看官烦请高抬贵手了，武汉建站公司小编感激了！