                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

我这样一加载更多的时候，图片就全飞了。请大神指教

<!DOCTYPE html>

<html>

<head>

<title>带有分散效果的瀑布流</title>

*{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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

$( 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>

Edge2J

2017-06-30

源自：瀑布流布局 5-2

关注问题我要回答

2026

操作

收起

4 回答

暮女神回答被采纳 +3 积分
2017-07-19

图片全飞出去的原因是你又把所有的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图片堆叠,