メーソンレイアウトの理解 - シットポイント

現代のWebデザインの状況は常に進化しています。 テーブルベースのリストとオフセットページネーションは時代遅れになり、無限のスクロールを伴う石積みのレイアウトは人気を博しています。この記事では、石積みのレイアウトとそのアプリケーションの複雑さを掘り下げています。

キーテイクアウト：

Pinterestスタイルのレイアウトとも呼ばれる石積みのレイアウトは、固定された行のない列ベースのグリッドレイアウトです。 ギャップを最小限に抑えることでスペースを最大化します
• 一般的な用途には、画像ギャラリー、ブログ投稿、ポートフォリオが含まれます。特に、アイテムにさまざまな寸法がある場合に有益です。
メーソンレイアウトの作成には、複雑な計算が必要になることがよくあります。通常、プラグインを使用する方が効率的です。人気のあるオプションには、石積み、Wookmark、Isotope、Nested、Freetile.js
• プラグインの機能を検討する機能には、動的な列のサイジング、並べ替え/フィルタリング、アニメーション、動的要素処理、レイアウトのカスタマイズオプションが含まれます。
• メーソンレイアウトの理解：

「石積みレイアウト」という用語は、人気のあるjQuery石積みプラグインに由来する可能性があります。 Pinterestスタイルのレイアウト（Pinterestの早期採用による）とも呼ばれます。これは、従来のグリッドとは異なり、固定高さを回避するコラムベースのグリッドです。この最適化されたスペース使用は、不必要なギャップを削減します。 従来のCSSフロートベースのレイアウトは一般的ですが、要素サイズを考慮せず、要素を水平方向に追加してから垂直に追加し、非効率的な間隔につながります。

対照的に、石積みのレイアウトが動的に調整され、無駄なスペースを最小限に抑え、視覚的な魅力を改善します。

動作中のメーソンリーレイアウト：

石積みのレイアウトは広く使用されています：

pinterest：pinterestの例画像

thewall：
• thewallの例画像
erik johansson photography：
• erik johansson photographyの例イメージ
therainth.us：
• thereason.usの例image
• 実用的なアプリケーション： メーソンリーレイアウトは、機能的な利点と審美的な利点の両方を提供します：
  • 画像ギャラリー：さまざまな寸法の画像を備えたギャラリーに最適で、サイズ変更と質の損失の必要性を回避します。
  • ブログの投稿：さまざまな長さの概要を切り捨てることなく、マルチコラムのブログ投稿表示を許可します。
  Portfolios：
  • プロジェクト、デザイン、またはその他のポートフォリオアイテムを効果的に紹介します
  石積みレイアウトの選択：

  石積みのレイアウトを実装する前に、を考慮してください

  グリッドベースのレイアウトが必要です。

  アイテムには多様な寸法が必要です。
  レイアウトの利点を完全に実現するには、かなりの数のアイテムが必要です。
  • 石積みレイアウトの生成：

  関連する計算の複雑さがあるため、プラグインを使用することをお勧めします。 一般的な選択肢は次のとおりです 石積み

  wookmark

  同位体
  ネスト
  freetile.js
  • メーソンプラグイン機能：
  視覚的に類似していますが、プラグインは異なる機能を提供します。 考慮すべき重要な機能は次のとおりです

  列のサイズ：

  ダイナミック列サイジングは、より大きな柔軟性を提供します。
  並べ替えとフィルタリング：
  • 再構築せずに動的なレイアウト調整を有効にします。
  アニメーション：
  • レイアウトの変更をアニメーション化することにより、ユーザーエクスペリエンスを向上させます 動的要素：
  ページリフレッシュなしで要素を追加/削除することを許可します
  • レイアウトオプション：列幅、ガターサイズ、およびアライメントのカスタマイズ。
  • プラグインを使用して石積みレイアウトを作成する（masonry.jsの例）：
  • この例では、人気のあるmasonry.jsプラグインを使用しています：
  ステップ1：
  htmlの終わりに

  を含めます。

  ステップ2：

  幅と高さのさまざまな要素を作成し、共通のクラス（「アイテム」など）を共有します。

  ステップ3：masonry.pkgd.min.js石積みプラグインの初期化：

  <🎜>

  結論：

  <div id='masonry'>
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... more items ... -->
  </div>

  メーソンのレイアウトは、プラグインを使用して簡単に実装できます。さまざまなプラグインと設定を試して、望ましい結果を達成します。

  （FAQを含む元のコンテンツの残りの部分は、主に既に提供され、上記で言い換えられる情報の繰り返しであるため、簡潔に省略されています。）

以上がメーソンレイアウトの理解 - シットポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。