jquery实现瀑布流效果jquery下拉加载新数据

瀑布流效果在很多网站上还是有的，这种东拼西凑的布置看起来很不错。今天，我将记录关于使用jquery实现瀑布流效果的代码。

一、页面的基本布局1。Items框主要用于存储我们需要放置的数据项；2.tips是用于在页面加载数据时提示用户的文本；

div class=' wrapper ' div class=' items ' div class=' item '/div/div p class=' tips loading ' loading./p /div II。css样式(控制提示语句的位置和数据显示的样式)

车身{ text-align:中央；margin : 0；padd : 0；背景-color : # F7F 7；Font-family: '微软雅黑'；}.包装器{ padding: 50px} img { display:块；宽度： 100%；height: 300px}.项目{ position:相对；填充-bottom : 10px；}.项目{ width: 228px绝对位置：border: 1px固体# ddd}.tips { width: 280px高度： 40px；margin: 30px自动0；文本对齐：中心；线高： 40px；背景-color : # CCC；border-radius : 6px；font-size : 16px；cursor:指针；位置：固定；bottom: 0px左侧：50%；边距-left :-140 px；opa city 3360 0；color: # 666} . tips . loading {/* background-color :透明；*/background-color : # dada；}三。模板的引用(由于本例中数据的显示样式是一致的，这里我引用的是模板artTemplate)

1.记得先介绍一下这个模板的js包；2.定义模板的模块必须有id并设置类型；

脚本src='http:/js/template _ native . js/'脚本脚本类型=' text/html ' id=' template ' % for(var I=0；一.项目.长度；I){ % div class=' item ' img src=' http :%=items[I]。路径% ' alt=' p %=items[I]。text%/p/div%}%/script iv。js在控制瀑布流量中的作用

1.这里，我请求两个PHP分别返回两个模拟数据；

$(function() { //页面一加载就出现的图片，对应实际百度图片中点击搜索图片$.ajax({ url: ' ./reset.php '，dataType: 'json '，成功：函数（数据){ var obj={ items : data }；var result=template('template '，obj)；$('.项目')。html(结果);瀑布();} });});//编写瀑布流jsfunction瀑布(){ //计算出显示盒子宽度var totalWidth=$(' .项目')。宽度();//计算出单张图片宽度（每张图片宽度是一致的)var eachWidth=$(' .物品。项目')。宽度();//计算出一行能排布几张图片var columNum=数学。地板(总宽度/每个宽度)；//将剩余的空间设置成外边距var margin=(总宽度-每个宽度*栏um)/(栏um 1)；//定义一个数组用来填充高度值var heightArr=[]；for(var I=0；I columNumI){ heightArr[I]=0；} //摆放位置摆放在最小高度处var elementItems=$(' .物品。项目');elementItems。每个（函数(idx，ele) { //取得一行中高度最小值及其索引//定义初始的最小值及其索引值var minIndex=0；var minValue=heightArr[minIndex]；for(var I=0；我身高一米八I){ if(heightArr[I]MinValue){ minIndex=I；minValue=heightArr[I]；} } $(元素).css({ //注意点：这儿乘上的是最小值所在的索引idx左边距：(边距各宽)* minIndex，顶距： minValue })；//重新计算高度，更新高度数组var oldHeight=heightArr[minIndex]；旧高度=$(元素).高度()边距；heightArr[minIndex]=旧高度；});返回heightArr}$(窗口)。on('scroll '，function() { if (toBottom()) { $(').tips’).css(“”不透明度',1);$.ajax({ url: ' ./index.php '，dataType: 'json '，成功：函数（数据){ var DataItem={ items : data }；var res=template('template '，DataItem)；$('.项目')。追加(RES)；瀑布();$('.tips’).css(“”不透明度',0);} });}});//判断是否已经到底部了函数ToBottom(){ var scrollTop=$(window).滚动顶部()；var clientHeight=$(窗口)。高度();var offsetTop=$(' .items .item:last-child ').偏移量()。顶部；console.log(scrollTop ' . '“clientHeight”.offsetTop)；if(滚动顶部客户端高度offsetTop){返回true} else {返回false}}五、最后在这里奉上的是自定义模拟数据，以及简单编写的服务器端编程语言(专业超文本预处理器的缩写)返回数据（别忘了，用此种方式获取数据的话，需要开启本地服务器哦~);

如下为返回数据的基本模式，如果想要定义多条数据，只要多复制几条对象就可；

[{ ' path ' :]./images/1.jpg '，' text': '中学时候我们班两个同学打赌，内容是在厕所吃方便面，谁先吃完谁赢，输了的请赢了的吃一个月的饭，于是厕所里惊现两个货蹲坑上吃泡面，这俩货还没有决出胜负，旁边拉屎的哥们都吐了三回了！'},{ '路径' : '。/images/2.jpg '，' text': '亲戚有许多好兄弟，平时戏称为马哥，牛哥，等等动物名。一次，有人敲门，那时他儿子尚小，一开门，对着他爸妈就说：爸爸，妈妈，驴来了！'} .]如下为服务器端编程语言(专业超文本预处理器的缩写)代码：

//reset.php？PHP $ JSonString=file _ get _ contents(' info/reset。JSON’)；$ TotalArr=JSON _ decode($ JSonString)；echo JSON _ encode($ total arr)；//index.php这里规定一次返回三条数据？PHP $ JSonString=file _ get _ contents(' info/data。JSON’)；$ TotalArr=JSON _ decode($ JSonString)；$ randomKeyArr=Array _ rand($总arr，3)；$ TemplateArr=array()；对于($ I=0；$ I count($ randomKeyArr)；$ I){ $ currentKey=$ randomKeyArr[$ I]；$ CurrentBoj=$ TotalArr[$ CurrentKey]；$ TemplateArr[$ I]=$ CurrentBoj；} echo JSON _ encode($ TemplateArr)；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。