jQuery Masonry ウォーターフォール フロー レイアウトの詳細な説明

この記事では主に jQuery Masonry ウォーターフォール レイアウト アーティファクトの使用方法を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

最近ウェブサイトを作成していたとき、その一部には多くの画像レイアウトが含まれており、より人気のあるウォーターフローレイアウトを使用したいと思いました。

最初は自分で書いたので、画像のサイズを確認することを考えていませんでしたが、レイアウト効果は得られますが、一部の画像はサイズが比較的小さいため、強制的に拡大されます。とても不調和に見えます。その後、オンラインで検索したところ、非常に優れた Water Flow レイアウト ツールがあることがわかりました。このアーティファクトについて知りましょう~
アーティファクトの名前: JQuery Masonry、URL: http://masonry.desandro.com/index.html

使用方法は非常に簡単です:

1. コンテナーをマークします。レイアウトする必要がある項目

Masonry には、同様の構造を持つ子要素をロードするためのコンテナーが必要です

<p id="container"> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 ... 
</p>

次に、Jquery と Masonry のスクリプト参照をページに追加し、jquery のバージョンが 1.6+

である必要があります

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/path/to/jquery.masonry.min.js"></script>

2. CSSを書く

レイアウトする必要があるすべての要素のサイズはCSSによって決定され、すべての要素はフローティングである必要があります
例:

.item { 
 width: 220px; 
 margin: 10px; 
 float: left; 
}

3.スクリプト

初期化レイアウトパラメータを渡すスクリプトを記述して、コンテナが自動的にレイアウトされるようにします。
itemSelector パラメーターと columnWidth パラメーターを設定することを強くお勧めします。パラメータ設定の詳細については、公式Webサイトを確認してください。

$(function(){ 
 $('#container').masonry({ 
  // options 
  itemSelector : '.item', 
  columnWidth : 240 
 }); 
});

OK、それだけです。非常に簡単〜

ウォーターフォールフローレイアウトのJS実装の解析例

以上がjQuery Masonry ウォーターフォール フロー レイアウトの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。