Jquery_html/css_WEB-ITnose に基づく画像ウォーターフォール フローの実装

問題解決のアイデア:

ステップ 1 問題を分析する: 私が問題に対処する方法はコラムです。スクロール バーが一番下までスクロールするたびに、追加する必要がある新しいコンテンツが最も高さの低い列に配置されます。下の写真のように

読み込み後の表示

そのまま下にスクロールすると。新しい画像は 1 の下に表示され、以下同様に表示されます。

ステップ 2 レイアウト: ページには、1、2、3 (画像列)、HTML コード構造を含む全体として外層があります

1 <div class="pictureflow">2     <div class="imglist"></div>3     <div class="imglist"></div>4     <div class="imglist"></div>5 </div>

ステップ 3 スタイル:

.pictureflow .imglist{    float:left;    margin:5px;    padding:2px 5px;     width:210px;    height:100%;    overflow:hidden;    border:1px solid #cccccc;}.pictureflow .imglist .imgo{    margin:0 auto;    padding-top:5px;}.pictureflow .imglist .imgo img{    width:200px;    border:1px solid #cccccc;    overflow:hidden;}

ステップ 3: js 操作:リアルタイムで高さを計算し、新しいモジュールをロードします

// 找到高度最小的一个imgo = $(obj).find(".imglist").eq(0);imgo_h = imgo.height();$(obj).find(".imglist").each(function(){    if(imgo_h > $(this).height()){            imgo = $(this);            imgo_h = imgo.height();    }});$(imgo).append(html);

デモ コード http://i.cnblogs.com/Files.aspx