我這樣一加載更多的時(shí)候，圖片就全飛了。請(qǐng)大神指教
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>帶有分散效果的瀑布流</title>
<style type="text/css">
? ? *{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 id="main">
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/9/ce/afc71195997.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/9/ce/afc71195999.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197547.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197548.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197549.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197550.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197551.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197557.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197565.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197567.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197568.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197570.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197571.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197572.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197573.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197574.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197575.jpg"/>
? ? ? ? </div>?
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/7/20/0bdb1197576.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/4/4b/c6461197588.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/4/4b/c6461197591.jpg"/>
? ? ? ? </div>
? ? </div>
? ? <div class="pin">
? ? ? ? <div class="box">
? ? ? ? ? ? <img src="http://pic1.win4000.com/pic/4/4b/c6461197592.jpg"/>
? ? ? ? </div>
? ? </div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$( window ).on( "load", function(){
? ?// 調(diào)用waterfall函數(shù)
? ?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(){
? ? ?
// 拖動(dòng)滾動(dòng)條時(shí)
? ? ? ?if(checkscrollside()){
? ? ? ? console.log(checkscrollside());
? ? ? ? ? ? $(json.data).each(function(index,value){
? ? ? ? ? ? ? ? //創(chuàng)建節(jié)點(diǎn)
? ? ? ? ? ? ? ? // $("<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(){
? ? ?// 計(jì)算及定位數(shù)據(jù)塊顯示分散效果
? ? ?var $main = $("#main");
? ? ?var $pins = $("#main>.pin");
? ? ?//設(shè)置外包裹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){
? ? ? ? //初始化數(shù)組
? ? ? ? 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(){
? // 檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
// 檢測(cè)是否具備了加載數(shù)據(jù)塊的條件
? //獲取最后一個(gè)盒子
? ? 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>
2017-07-19
圖片全飛出去的原因是你又把所有的pin遍歷了一遍并重新排列,要解決的話需要加個(gè)判斷,或者重寫(xiě)個(gè)函數(shù)waterfall2
目的是只排列json中的圖片,例如這樣寫(xiě):
var?num=0; function?waterfall2(){ ????var?$main?=?$("#main"); ?????var?$pins?=?$("#main>.pin"); ?????//設(shè)置外包裹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){ ????????//初始化數(shù)組 ????????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是為了儲(chǔ)存原來(lái)圖片的個(gè)數(shù),所以在waterfall()函數(shù)中也應(yīng)聲明num=$pins.length;
這樣就能解決了,不過(guò)這樣的體驗(yàn)并不好,不如不加動(dòng)畫(huà)直接渲染出來(lái).而且你這個(gè)代碼的bug還是太多,比如在圖片排列時(shí)如果滑動(dòng)滾動(dòng)條就會(huì)有多組json圖片堆疊,
2017-07-20
重新修改的