炫酷的jquery瀑布流
作者：帝·姬 | 来源：互联网 | 2023-05-19 17:50
最近做了一个瀑布流效果，思路很简单首先计算屏幕一行可以放多少个图片，然后在第二行开始，计算每一列的高度并取出最小值，将新图片加载在最小列高度下，如此循环，并且设定一个条件，当滑动到一定距离后，
瀑布流测试demo
-->
ul>
div>
var number=0;
var sindex=0;
var arr=[]; //存放每列高度的数组
var data = [
{'src':'1.jpg','title':'瀑布流测试'},
{'src':'2.jpg','title':'瀑布流测试'},
{'src':'3.jpg','title':'瀑布流测试'},
{'src':'4.jpg','title':'瀑布流测试'},
{'src':'5.jpg','title':'瀑布流测试'},
{'src':'6.jpg','title':'瀑布流测试'},
{'src':'7.jpg','title':'瀑布流测试'},
{'src':'8.jpg','title':'瀑布流测试'},
{'src':'9.jpg','title':'瀑布流测试'},
{'src':'10.jpg','title':'瀑布流测试'},
{'src':'11.jpg','title':'瀑布流测试'}
];
1 window.Onscroll=function(){
2 if($(window).scrollTop()+$(window).height()+20>$(document).height()){
3 //alert(23)
4 $.each(data,function(i,val){
5 var sHtml=''
6 sHtml+='
'+val.title+number+'
'
7 $("ul"
).append(sHtml)
8 number++
9 })
10 calc()
11 }
12 }
13 window.Onload=
function(){
14 //alert(23)
15 $.each(data,
function(i,val){
16 var sHtml='
'
17 sHtml+='
'+val.title+number+'
'
18 $("ul"
).append(sHtml)
19 number++
20 })
21 setTimeout(calc,10
)
22 }
在页面加载，页面滚动到下部时，我们循环生成li元素，并且执行calc方法，在页面加载时，对calc函数进行了延时处理，如果直接执行，会出现计算错误，不知道还有没有更好的办法解决。
1 function calc(){
2 var $_li=$('li');
3 var length=$_li.length;
4 var li_li").eq(0).outerWidth();
5 var pad_li").eq(0).width();
6 var documentWidth=$(window).width();
7 var column=Math.floor(documentWidth/li_width); //每一行可显示的图片数
8 $("ul").css("width",column*li_width) ; //计算外围容器宽度
9 for(i=sindex;i){
10 if(i//第一列图片正常排列
11 arr[i]=$_li.eq(i).outerHeight();
12 $_li.eq(i).css({"position":'absolute', //元素设为绝对定位
13 "left":i*li_width,
14 "top":100,
15 "opacity":"0",
16 'width':"0px"
17 }).addClass("ani")
18 $_li.eq(i).animate({
19 opacity:"1",
20 top:"0px",
21 left:i*li_width,
22 width:pad_width
23 },700)
24 }else{
25 var minHeight=Math.min.apply(null,arr) //计算最小高度确定位置
26 //console.log(arr)
27 var index=compare(minHeight,arr);
28 put($_li,i,index,column,minHeight)
29 arr[index]+=$_li.eq(i).outerHeight()
30 }
31 console.log(minHeight)
32 }
33 sindex=length
34
35 }
主要的元素，calc元素，通过屏幕宽度与li宽度进行每行可放置li的数量，其中第一行的元素直接赋值，每个元素的left为别为i*300，其中有些属性查了些资料才弄清楚。
jquery中获取元素宽度为width()，这个宽度只包括元素的width部分，而outerWidth（）获取的宽度包括元素的padding与border，outerWidth（true）则默认包括margin。
获取元素相对于文档（document）的距离在jquery方法分别为offset().top,offset().left,js中为offsetHeight，offsetLeft。
在排列过程，我添加了透明度+top值得动画，同时运用css3属性进行了反转动画（scale(-1,1)效果等同于rotateY(180)）.
1 function compare(height,sum){
2 var $_length=sum.length;
3 for(j=0;j<$_length;j++){
4 if(sum[j]==height){
5 return j
6 }
7 }
8 }
9 function put(obj,index,minIndex,column,height){
10 obj.eq(index).css({"position":'absolute', //元素设为绝对定位
11 "left":obj.eq(Math.floor(column/2)).css("left"),
12 "top":parseInt(height)+100,
13 "opacity":"0",
14 'width':"0px"
15 }).addClass("ani")
16 obj.eq(index).stop().animate({
17 opacity:"1",
18 top:height,
19 left:obj.eq(minIndex).css("left"),
20 width:"280px"
21 },700)
22 }
京公网安备 11010802041100号