この記事では主に 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、それだけです。非常に簡単〜
以上がjQuery Masonry ウォーターフォール フロー レイアウトの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。