幫我看一下有什么問題
<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.onscroll=function(){
? ? ? ?// 拖動(dòng)滾動(dòng)條時(shí)
? ? ?if(checkscrollside()){
? ? ? $.each(dataInt.data,function(index,value){
? ? var pin=$("<div>").addClass("pin").appendTo($("#main"));
? ? var box=$("<div>").addClass("box").appendTo($(pin));
? ? ? ? ? ?$("<img>").attr("src","images/"+$(value).attr("src")).appendTo($(box));
? ? ? }) ??
? ? ??
? ? ?waterfall();
? ? ?}
? ? ?}
});
function waterfall(){
?// 計(jì)算及定位數(shù)據(jù)塊顯示分散效果
?var $pins=$("#main>div");
?var w=$pins.eq(0).outerWidth();
?var num=Math.fioor($(window).width()/w);
?/*$("#main").css({
? ? ?"width":w*num+"px",
? ? ?"margin":"0 auto"
?});*/
?$("#main").width(w*num).css("margin","0 auto");
? ? var ar=[];
? ?$pins.each(function(index,value){
? ? ? ?if(index<num){
? ? ? ? ?ar[index]=pins.eq(index).outerHeight(); ?
? ? ? ?}else{
? ? ? ? ?var minH=Math.min.apply(null,ar);
? ? ? ? ?var minindex=$.inArray(minH,ar);
? ? ? ??
? ? ? ? ?$(value).css({
? ? ? ? ? ? "position":"absolute",
? ? ? ? ? ? "top":minH+"px",
? ? ? ? ? ? "left":minindex*w+"px"
? ? ? ? ?});
? ? ? ? ?ar[minindex]+=$pins.eq(index).outerHeigt();
? ? ? ?}
? ?})
? ? ? ??
? ?
}
function checkscrollside(){
? // 檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
? var lastpin=$("#main>div").last();
? var lastH=lastpin.offset().top+Math.floor(lastpin.outerHeight()/2);
? var scrolltop=$(window).scrollTop();
? var docH=$(window).height();
? return(lastH<scrolltop+docH)?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>
圖片加載不出來？
到了21張后面就沒有了？
2017-11-29
?$("<img>").attr("src","./images/"+$(value).attr("src")).appendTo($(box));? ? jQuery代碼里面的路徑要和html里面的一樣
2017-01-18
你IMG只有21張 ?
如果要加圖片 ?需要html Img里注明路徑 ?不然怎么加載圖片
2016-11-28
不知道哎，幫你頂上去。
圖片加載不出來？
到了21張后面就沒有了？