jQuery瀑布流技术封装并制作插件

来源：互联网发布：php死循环怎么办编辑：程序博客网时间：2024/05/29 13:40

瀑布流布局,其实是一种绝对定位(absolute)布局.

原理分析:

1.html,css结构 : 子绝父相

<body>

...

</div>

</body>

2.给每一个子元素进行top,left设置定位

/*需求1:设置原始数据
一排元素个数n : items的宽度/item的宽度 向下取整
间隙margin: (items的宽度-n*item的宽度)/(n+1)
一排元素的总高度集合topArr: 长度为n 元素为对应item的高度 初始值都为margin
需求2:设置第一排dom元素位置
需求2.1:修改topArr里面元素的值
*/
var itemWidth = $('.item').width();
var n =Math.floor($('.items').width() /itemWidth);
var margin = ($('.items').width() -n *itemWidth) / (n +1);
var topArr = [];
for (vari =0;i < n; i++) {
topArr[i] =margin;
$('.item').eq(i).css({
top: topArr[i],
left: (margin +itemWidth) *i +margin
});
topArr[i] +=$('.item').eq(i).height();
}
/*需求3:判断topArr中最小值及index,依次将后面的item元素放在其后面
需求3.1:每次放置后,修改topArr里面元素的值*/
for (vari =n;i < $('.item').length;i++) {
var minH =Infinity;
var minIndex = -1;
for (varj =0;j < n; j++) {
if (topArr[j] <minH) {
minH = topArr[j];
minIndex = j;
}
}
$('.item').eq(i).css({
top: minH,
left: (margin +itemWidth) *minIndex +margin
});
topArr[minIndex] +=$('.item').eq(i).height();
}
/*需求4:设置父容器高度*/
var maxH = -Infinity;
for(vari=0;i<n;i++){
if(topArr[i]>maxH){
maxH = topArr[i];
}
}
$('.items').height(maxH);
对其进行封装处理并根据jQuery插件机制制作插件
$.fn.extend({
waterfall: function () {
/*this指向调用该函数的jQuery对象*/
var itemWidth =this.children().width();
var n =Math.floor(this.width() /itemWidth);
var margin = (this.width() -n *itemWidth) / (n +1);
var topArr = [];
for (vari =0;i < n; i++) {
topArr[i] =margin;
this.children().eq(i).css({
top: topArr[i],
left: (margin +itemWidth) *i +margin
});
topArr[i] +=this.children().eq(i).height();
}
for (vari =n;i < this.children().length;i++) {
var minH =Infinity;
var minIndex = -1;
for (varj =0;j < n; j++) {
if (topArr[j] <minH) {
minH = topArr[j];
minIndex = j;
}
}
this.children().eq(i).css({
top: minH,
left: (margin +itemWidth) *minIndex +margin
});
topArr[minIndex] +=this.children().eq(i).height();
}
var maxH = -Infinity;
for(vari=0;i<n;i++){
if(topArr[i]>maxH){
maxH = topArr[i];
}
}
this.height(maxH);
/*返回this,也是jQuery链式编程的逻辑*/
return this;
}
})

$('.items').waterfall();

3.添加浏览器缩放事件

$(window).resize(function () {
$('.items').waterfall();
});

阅读全文

0 0