想做成以上效果的瀑布流，但是写了之后变成下面这样了- -图片很多被覆盖了，不会自动把宽度小的图片往上面放，而且也不居中了，求大神们帮忙看看代码指点一下小白T^T代码部分<title>无标题文档</title>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/20151229 (1).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (2).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (3).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (4).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (5).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (6).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (7).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (8).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (9).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (10).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (11).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (12).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (13).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (14).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (15).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (16).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (17).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (18).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (19).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (20).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (21).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (22).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (23).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (24).jpg" />
</div>
</div><div class="box">
<div class="pic">
<img src="images/20151229 (25).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (26).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (27).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (28).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (29).jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/20151229 (30).jpg" />
</div>
</div>
</div>
#main{ position:relative;}
.box{ padding:10px 0 0 10px; float:left;}
.pic img{ width:auto; height:250px;}<script>
$(window).on('load',function(){
waterfall();
var dataInt={"data":[{"src":"20151229 (1).jpg"},{"src":"20151229 (2).jpg"},{"src":"20151229 (4).jpg"}]};
$(window).on('scroll',function(){
if(checkScrollSlide()){
$.each(dataInt.data,function(key,value){
var oBox=$('<div>').addClass('box').appendTo($('#main'));
var oTu=$('<div>').addClass('tu').appendTo($(oBox));
var oImg=$('<img>').attr('src',$(value).attr('src')).appendTo($(oTu));
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#main>div');
var w=$boxs.eq(1).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#main').width(w*cols).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*h+'px'
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var $lastBox=$('#main>div').last();
var lastBoxDis=$lastBox.offset().top+$lastBox.outerHeight();
var scrllTop=$(window).scrollTop();
//if(contentH - viewH - scrollTop <= 100);
var documentH=$(window).height();
return (lastBoxDis<=scrllTop+documentH)?true:false;
}
</script>
1 回答
泰伯
TA贡献3条经验 获得超0个赞
首先你要弄清楚，你这个图片显示出来是否有顺序之说，如果没有顺序的话，仅仅是随机展示
你可以使用多种方式来实现
1.通过计算显示的图片的宽度，相对于一行的宽度占的比例，然后循环往里填充
2.也可以通过分组的方式，把图片分组，分组的规则：横向宽度要达到屏幕宽度，高度要达到一行的高度等。
以上均是提出的思路，具体实现代码请自重
添加回答
举报
0/150
提交
取消