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

小云云
リリース: 2018-01-10 13:32:52
オリジナル
1951 人が閲覧しました

この記事では主に 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(){ 
 $(&#39;#container&#39;).masonry({ 
  // options 
  itemSelector : &#39;.item&#39;, 
  columnWidth : 240 
 }); 
});
ログイン後にコピー

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート