jquery php瀑布流布局,jQuery实现瀑布流布局_jquery

HTML

CSS

* {

margin: 0;

padding: 0;

}

#main {

position: relative;

}

.box {

padding:15px 0 0 15px;

float:left;

}

.pic {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0px 0px 5px #ccc;

img {

width:165px;

height:auto;

}

}

JavaScript

$(window).on("load",function () {

waterfall();

var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

//模拟json数据;

$(window).on("scroll",function () {

if(checkScrollSlide){

$.each(dataInt.data,function (key,value) {

var oBox=$("

").addClass("box").appendTo($("#main"));

//jQuery支持连缀,隐式迭代;

var oPic=$("

").addClass('pic').appendTo($(oBox));

$("

").attr("src","images/"+$(value).attr("src")).appendTo(oPic);

});

waterfall();

}

})

});

//流式布局主函数;

function waterfall () {

var $boxs=$("#main>div");

//获取#main元素下的直接子元素div.box;

//获取每一列的宽度;

var w=$boxs.eq(0).outerWidth();

//outerWidth()获取包含padding和border在内的宽度;

//var w=$boxs.eq(0).width();

//width()只能获取给元素定义的宽度;

var cols=Math.floor($(window).width()/w);

//获取多少列;

$("#main").width(w*cols).css("margin","0 auto");

//设置#main元素的宽度和居中样式;

var hArr=[];

//每一列高度的集合;

$boxs.each(function (index,value) {

//遍历每一个box元素;

//为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;

var h=$boxs.eq(index).outerHeight();

//每一个box元素的高,

if (index

hArr[index]=h;

//确定每列第一个元素的高度;

} else{

var minH=Math.min.apply(null,hArr);

//得出列高数组中的最小高度;

var minHIndex=$.inArray(minH,hArr);

//$.inArray()方法得出元素(minH)在数组(hArr)中的index值;

//console.log(value);

//此时的value是第一行之后的所有的box元素的DOM对象!;

$(value).css({

//$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;

"position":"absolute",

"top":minH+"px",

"left":minHIndex*w+"px"

});

hArr[minHIndex]+=$boxs.eq(index).outerHeight();

//最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;

};

});

// console.log(hArr);

};

function checkScrollSlide () {

var $lastBox=$("#main>div").last();

var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

var scrollTop=$(window).scrollTop();

var documentH=$(window).height();

return (lastBoxDis

}

详细解释清仔细参考注释吧，我就不单独再拉出来写了。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议我要评论

立即提交

专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习