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

哪位大神帮忙看下为什么图片出不来，滚动加载不了奇怪？？

<!DOCTYPE html>

<html>

<head>

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

*{padding: 0;margin:0;}

#main{

position: relative;

}

.pin{

padding: 15px 0 0 15px;

float:left;

}

.box{

padding: 10px;

border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;

border-radius: 5px;

}

.box img{

width:162px;

height:auto;

}

</style>

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

// 调用waterfall函数

waterfall();

var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

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

// 拖动滚动条时

if(checkscrollside){

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

var opin=$("<div>").addClass("pin").appendTo($("#main"));

var oBox=$("<div>").addClass("box").appendTo($(opin));

var oImg=$("<img>").attr("src","images/"+$(value).attr("src")).appendTo($(oBox));

});

waterfall();

}

})

});

function waterfall(){

// 计算及定位数据块显示分散效果

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

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

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

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

var hArr=[];

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

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);

$(element).css({

"position":"absolute",

"top":minH+"px",

"left":minHIndex*w+"px"

})

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

}

})

}

function checkscrollside(){

// 检测是否具备了加载数据块的条件

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<scrollTop+documentH)?true:false;

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

明日之渺

2017-07-11

源自：瀑布流布局 5-2

关注问题我要回答

1482

操作

收起

2 回答

LeftJS
2017-11-29

图片路径不对吧！我看你HTML里面的路径是./images，那么jQuery代码里面也应该要一样。var oImg=$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oBox)); 改改路径应该就好了

0 回复有任何疑惑可以回复我~

收起回答

酸溜土豆丝3362793
2017-07-17

简单的说就是你的图片不够多，还没有溢出来，让滚动条显示。如果你开个f12控制台，你就可以直接滚动了。
你也可以改变列数，把
$("#main").width(w*cols).css("margin","0 auto");
var hArr=[];
$boxs.each(function(index,element){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
这里2个cols改成4或者其他小一点的，只要出现滚动条就可以滚动了