我这样一加载更多的时候，图片就全飞了。请大神指教
Edge2J
2017-06-30 17:49
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>带有分散效果的瀑布流</title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
15+20+163+2
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:163px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/9/ce/afc71195997.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/9/ce/afc71195999.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197547.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197548.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197549.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197550.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197551.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197557.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197565.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197567.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197568.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197570.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197571.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197572.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197573.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197574.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197575.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/7/20/0bdb1197576.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/4/4b/c6461197588.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/4/4b/c6461197591.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.win4000.com/pic/4/4b/c6461197592.jpg"/>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$( window ).on( "load", function(){
// 调用waterfall函数
waterfall();
var json={'data':[{'src':'http://pic1.win4000.com/pic/4/4b/c6461197591.jpg'},{'src':'http://pic1.win4000.com/pic/4/4b/c6461197588.jpg'},{'src':'http://pic1.win4000.com/pic/4/4b/c6461197592.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197574.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197575.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197576.jpg'},{'src':'http://pic1.win4000.com/pic/7/20/0bdb1197573.jpg'}]};
window.onscroll=function(){
// 拖动滚动条时
if(checkscrollside()){
console.log(checkscrollside());
$(json.data).each(function(index,value){
//创建节点
// $("<div class='box'><div class='pic'><img src='images/"+value.src+"'></div></div>").appendTo("#main");
var $img = $("<img>").attr("src",'images/'+value.src);
var $box = $("<div>").addClass("box").append($img);
var $pin = $("<div>").addClass("pin").append($box);
$("#main").append($pin);
});
}
// waterfall();
}
});
var hArr=[];
function waterfall(){
// 计算及定位数据块显示分散效果
var $main = $("#main");
var $pins = $("#main>.pin");
//设置外包裹main的宽度
var w = $pins.eq(0).outerWidth();
var cols = Math.floor($(window).width()/w);
$main.width(cols*w).css("margin","0 auto");
$pins.each(function(index,value){
//初始化数组
if(index<cols){
hArr.push(0);
}
//分散效果
$(value).css({
'position':'absolute',
'left':200+Math.random()*300+'px',
'top':200+Math.random()*300+'px'
});
});
//定位盒子
show($pins,w,0);
}
function show(pins,width,i){
var $ele = pins.eq(i);
var minH = Math.min.apply(null,hArr);
var minIndex = $.inArray(minH,hArr);
$ele.animate({
left:minIndex*width+'px',
top:hArr[minIndex]+'px'
},300,function(){
hArr[minIndex]+=$ele.outerHeight();
i++;
show(pins,width,i);
});
}
function checkscrollside(){
// 检测是否具备了加载数据块的条件
// 检测是否具备了加载数据块的条件
//获取最后一个盒子
var $lastBox = $("#main>.pin:last");
var offsetTop = $lastBox.offset().top+$lastBox.outerHeight()-10;
var scrollTop = $(document).scrollTop()+$(window).height();
// console.log(scrollTop+"------"+offsetTop);
return scrollTop>offsetTop?true:false;
}
</script>
</html>
3回答
-
- 暮女神
- 2017-07-19 18:19:30
图片全飞出去的原因是你又把所有的pin遍历了一遍并重新排列,要解决的话需要加个判断,或者重写个函数waterfall2
目的是只排列json中的图片,例如这样写:
var num=0; function waterfall2(){ var $main = $("#main"); var $pins = $("#main>.pin"); //设置外包裹main的宽度 var w = $pins.eq(0).outerWidth(); var cols = Math.floor($(window).width()/w); $main.width(cols*w).css("margin","0 auto"); $pins.each(function(index,value){ //初始化数组 if(index>num-1){ //分散效果 $(value).css({ 'position':'absolute', 'left':200+Math.random()*300+'px', 'top':200+Math.random()*300+'px' }); } }); //定位盒子 showL($pins,w,num); num=$pins.length; }num是为了储存原来图片的个数,所以在waterfall()函数中也应声明num=$pins.length;
这样就能解决了,不过这样的体验并不好,不如不加动画直接渲染出来.而且你这个代码的bug还是太多,比如在图片排列时如果滑动滚动条就会有多组json图片堆叠,
-
- 幕布斯9266291
- 2022-04-02 07:13:45
在去试一试，可以了。
-
- Edge2J
- 2017-07-20 16:23:08
瀑布流布局
97759 学习 · 736 问题
相似问题