2

序文: Masonry は、1 つのページに HTML ページの「ブリック スタイル」レイアウトを作成する JQuery プラグインです。無限スクロールは、ピントレスト スタイルのページ アイテムのスクロールを可能にするプラグインです。

ここに無限スクロール付きの石積みがインストールされています：

http://helpknow.com/black2/

そして私の問題はこれです。

「コンテナ」divを配置して、ページ内のアイテムのリスト全体を中央に配置したいと考えています。

したがって、次のようなコードを使用します。

#container {
  left:140px;   // <---- Positioning 
  padding:10px;
  background: #FFF;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}

問題は、ページを開くと、すべての石積みアイテムがその位置に移動するクイック「ちらつきジャンプ」があることです（最初のページの読み込み時にのみ、更新時に表示できない場合があります）。私はこれをしたくありません。アイテムが「ちらつき」ないようにしたい。ユーザーがスクロールするまで静的に表示してから、アニメーションを期待どおりに実行したい. 左の配置を削除すると、この問題は発生しません (ただし、明らかに項目が左に浮いて中央に配置されていません。これは私が望んでいるものではありません)。メインのdiv「コンテナ」とその他のアイテムを新しいdivコンテナにラップして移動しようとしましたが、同じ問題が発生しました。

4

1 に答える 1

2

すべてのコンテンツがロードされたときに Masonry を初期化することを意味する 2 を試しましたか? 今、あなたはそれを1のようにやっています...

1 これは、DOM が構築されたときに、すべてのコンテンツがロードされる前に実行されます

$(document).ready(function(){ ... });
$(function(){...}); // short form

2 これは、すべてのコンテンツがロードされたときに実行されます

$(window).load(function(){ ... });

3 これは、ブラウザが最初に遭遇したときにすぐに実行されます

(function(){ ... })();

後者は自己実行型の無名関数 (クロージャとして知られる) であり、非常に便利ですが、自己実行時にコンテンツがロードされていないか、適切なコンテンツがロードされていない可能性があるため、ここでは使用しません。

更新または、#container をフェードインすることもできます。これも見栄えがすることがあります。こちらのフィドルを参照してください。これは、Masonry の兄である Isotope と同じことを行います。

于 2012-09-02T06:49:49.000 に答える