哪位大神幫忙看下為什么圖片出不來(lái)，滾動(dòng)加載不了奇怪？？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<title>帶有分散效果的瀑布流</title>
<style type="text/css">
? ? *{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>
<script>
$( window ).on( "load", function(){
? ?// 調(diào)用waterfall函數(shù)
? ?waterfall();
? ?
? ? var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
? ? $(window).on("scroll",function(){
? ? ? ?// 拖動(dòng)滾動(dòng)條時(shí)
? ? ? ?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(){
?// 計(jì)算及定位數(shù)據(jù)塊顯示分散效果
?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(){
? // 檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
? 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 id="main">
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/1.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/2.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/3.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/4.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/5.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/6.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/7.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/8.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/9.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/10.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/11.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/12.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/13.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/14.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/15.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/16.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/17.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/18.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/19.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/20.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="./images/21.jpg"/>
? ? ? ? </div>
? ? </div>
</div>
</body>
</html>
2017-11-29
圖片路徑不對(duì)吧！我看你HTML里面的路徑是./images，那么jQuery代碼里面也應(yīng)該要一樣。var oImg=$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(oBox));?改改路徑應(yīng)該就好了
2017-07-17
簡(jiǎn)單的說(shuō)就是你的圖片不夠多，還沒(méi)有溢出來(lái)，讓滾動(dòng)條顯示。如果你開個(gè)f12控制臺(tái)，你就可以直接滾動(dòng)了。?
你也可以改變列數(shù)，把
$("#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個(gè)cols改成4或者其他小一點(diǎn)的，只要出現(xiàn)滾動(dòng)條就可以滾動(dòng)了