问答详情
源自:5-2 编程挑战

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

<!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(){

   // 调用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 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-07-11 23:04

个回答

  • LeftJS
    2017-11-29 17:16:25

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

  • 酸溜土豆丝3362793
    2017-07-17 09:37:31

    1. 简单的说就是你的图片不够多,还没有溢出来,让滚动条显示。如果你开个f12控制台,你就可以直接滚动了。 

    2. 你也可以改变列数,把

      $("#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或者其他小一点的,只要出现滚动条就可以滚动了