<div class="pin">??????? <div class="box">??????????? <img src="img/20131104002408_y8jCh.thumb.224_0.jpg"/>??????????? <div style="word-break: break-all;word-wrap: break-word;">ndnvdn53555555555<br/>555555555555555555555555555555555vdoivodhvjoi</div>??????????? <p>ndnvdnvdoivodhvjoi</p>??????????? <p>ndnvdnvdoivodhvjoi</p>??????????? <p>ndnvdnvdoivodhvjoi</p>??????????? <p>ndnvdnvdoivodhvjoi</p>??????? </div>??? </div>?.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:210px;??????? height:auto;?? ??? ?word-break: break-all;?? ??? ?display:block;?? ??? ?word-wrap: break-word;?? ??? ?background-color:#0F0;??? }jQuery代碼如下：// JavaScript Document$( window ).on( "load", function(){??? waterfall('main','pin');??? var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};??? window.onscroll=function(){??????? if(checkscrollside()){??????????? $.each( dataInt.data, function( index, value ){??????????????? var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );??????????????? var $oBox = $('<div>').addClass('box').appendTo( $oPin );??????????????? $('<img>').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);??????????? });??????????? waterfall();??????? };??? }});/*??? parend 父級id??? pin 元素id*/function waterfall(parent,pin){??? var $aPin = $( "#main>div" );??? var iPinW = $aPin.eq( 0 ).width();// 一個塊框pin的寬??? var num = Math.floor( $( window ).width() / iPinW );//每行中能容納的pin個數【窗口寬度除以一個塊框寬度】??? //oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//設置父級居中樣式：定寬+自動水平外邊距??? $( "#main" ).css({??????? 'width:' : iPinW * num,??????? 'margin': '0 auto'??? });??? var pinHArr=[];//用于存儲 每列中的所有塊框相加的高度。??? $aPin.each( function( index, value ){??????? var pinH = $aPin.eq( index ).height();??????? if( index < num ){??????????? pinHArr[ index ] = pinH; //第一行中的num個塊框pin 先添加進數組pinHArr??????? }else{??????????? var minH = Math.min.apply( null, pinHArr );//數組pinHArr中的最小值minH??????????? var minHIndex = $.inArray( minH, pinHArr );??????????? $( value ).css({??????????????? 'position': 'absolute',??????????????? 'top': minH + 15,??????????????? 'left': $aPin.eq( minHIndex ).position().left??????????? });??????????? //數組 最小高元素的高 + 添加上的aPin[i]塊框高??????????? pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了塊框后的列高??????? }??? });}function checkscrollside(){??? var $aPin = $( "#main>div" );??? var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//創建【觸發添加塊框函數waterfall()】的高度：最后一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)??? var scrollTop = $( window ).scrollTop()//注意解決兼容性??? var documentH = $( document ).width();//頁面高度??? return (lastPinH < scrollTop + documentH ) ? true : false;//到達指定高度后 返回true，觸發waterfall()函數}敬請各位老師幫忙解答