布局的原理： 用一个类名为item的div作为图片的容器，每个item的宽都相等，高度自适应，使用绝对定位。第一行的item只需要处理left就不详细说了。第二行以后：获取到第一行的item的高度作为这一列的高度，找到其中最小的值，那么从第二行开始的item的top值就等于这个值，而left就等于这一列的left，这个时候这一列的高度+=当前处理的item的高度。
附上详细代码
HTML部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="picturewall"></div>
</body>
</html>
CSS:
*{
font-family: "microsoft yahei",sans-serif;
padding: 0;
margin: 0;
}
#picturewall{
width: 940px;
height: auto;
margin: 0 auto;
position: relative;
}
.item{
width: 300px;
height: auto;
box-sizing: border-box;
border: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 15px #666;
-moz-box-shadow: 0 0 15px #666;
box-shadow: 0 0 15px #666;
position: absolute;
text-align: center;
}
.item>img{
height: auto;
width: 280px;
display: block;
margin: 10px;
}
jquery :
$(function(){
//用数组存放图片的文件名
var pictureSources = [
"31bbb105bf1ce318ffd72de5fd601614edda4cd61d278-IjoIRf_fw658.jpg",
"57a70575f8a78ffe9d65297e0f75be89a61f14fa3988b2-LgCVaH_fw658.jpg",
"6182b15541cb11f6de40ccd9be7239861ba946de26304a-p6giW6_fw658.jpg",
"6c0898eb4b898db935c27f8c3319d54b34104e8b22fd8-oKLgCV_fw658.jpg",
"9d5992e5231864f09748b6d5f7b03165821bdb4bffc3e-0n27FJ_fw658.jpg",
"a1c7f703728f99e7e59fd8c9c250ef8536fa8ae0327fd7-Uh635n_fw658.jpg",
"c627789a24da25b438a3d86310e97612f697316bd970-YXUyG9_fw658.jpg",
"d7e78fc59a0c102c282a154177ed730295634a241d907-ELAB1U_fw658.jpg",
"dcc0754632a597e2ab91ce85eabca8fa71842ac71647e-2pRt4q_fw658.jpg"
];
var base = "picture\/";
//item 元素的基本结构
var baseElem = $("<div class=‘item‘></div>").append("<img/>").append("<hr/>").append("<h4>description</h4>");
//实现瀑布流布局的函数
function waterfall(){
var items = $("div.item");//获取到所有的类名为item的元素
var postop = [];//这个数组用来存放item定位的高度
var itemWidth = items.eq(0).width()+10;//宽度都是一样的所有随便获取一个就行
items.each(function(index,elem){
var targetItemTop = items.eq(index).height()+10;//遍历所有item并获取高度
if(index < 3){//如果是在第一行
postop[index] = targetItemTop;//把高度直接加入数组中
$(elem).css({
"left":310*index,//设置left
"top": 10//和top
});
}else{
//其他行
var mintop = Math.min.apply(null,postop);//获取数组中最小的一个
var minindex = $.inArray(mintop,postop);//获取到数组最小值对应的排序
$(elem).css({
"top":mintop+10,//设置top为数组中最小值
"left":parseInt(items.eq(minindex).css("left"))//设置left
});
}
postop[minindex] += $(elem).height()+10;//更新数组
});
}
//添加item的函数
function getItems(){
for(var i = 0; i < pictureSources.length; i++){
baseElem.clone().hide().children("img").attr("src",base+pictureSources[i]).bind("load",function(){
waterfall();
$(this).parent().fadeIn(500);
}).end().appendTo("#picturewall");
}
}
//判断文档滚动的位置
function wheelListen(){
var srollHeight = $(document).scrollTop();
if(srollHeight+$(window).height() >= $(document).height()-100){
getItems();
}
}
//绑定事件
$(window).on("load",function(){
getItems();
$(document).bind("mousewheel DOMMouseScroll",function(){
wheelListen();
});
})
});
效果图：
通过滚动鼠标滚轮可以实现图片无限加载，配合上ajax基本上就完成了。
时间： 2024-10-10 10:03:49