了解砌體佈局 - 站點點

>現代網絡設計格局正在不斷發展。 基於桌子的列表和偏移分頁正在變得過時，而無限滾動的磚石佈局正在越來越受歡迎。本文深入研究了砌體佈局及其應用的複雜性。

鑰匙要點：

>砌體佈局，也稱為Pinterest風格的佈局，是一個基於列的網格佈局，沒有固定高度行。 它通過最大程度地減少差距來最大化空間。
常見用途包括圖像畫廊，博客文章和投資組合，當項目具有不同的尺寸時，尤其是有益的。
• >
創建砌體佈局通常需要復雜的計算；使用插件通常更有效。流行的選項包括磚石，wookmark，同位素，嵌套和freetile.js。 要考慮的
• 插件功能包括動態列尺寸，排序/過濾，動畫，動態元素處理和佈局自定義選項。

了解砌體佈局：

>“砌體佈局”一詞可能起源於流行的jQuery砌體插件。 也稱為Pinterest風格的佈局（由於Pinterest的早期採用），這是一個基於列的網格，與傳統網格不同，它可以避免固定高度的行。這種優化的空間用法減少了不必要的差距。 傳統的CSS基於Float的佈局，雖然常見，但不能考慮元素大小，然後水平添加元素，然後垂直添加元素，從而導致間距低。

相反，砌體佈局動態調整，最大程度地減少浪費空間並改善視覺吸引力。

磚石佈局在行動中：

>

砌體佈局已被廣泛使用：

> pinterest：

pinterest示例圖像

• > the wall： thewall示例圖像
• > Erik Johansson攝影：
• > thereason.us： 實用應用：
• 砌體佈局提供功能性和美學優勢：
  • 圖像畫廊：非常適合具有變化尺寸的圖像的畫廊，避免了調整大小和質量損失的需求。 >
  • 博客文章：允許顯示多列博客文章，而不會截斷長度不同的摘要。
  • 投資組合：有效地展示了項目，設計或其他投資組合項目。

  選擇砌體佈局：>

  在實施砌體佈局之前，請考慮：
  >基於網格的佈局是必要的。
  • 項目應該具有多樣化的維度。
  >需要大量項目以充分實現佈局的好處。
  • 生成砌體佈局：

  由於所涉及的計算的複雜性，建議使用插件。 流行選擇包括：

  砌體
  > wookmark
  • >同位素
  • 嵌套
  freetile.js
  • >砌體插件功能：
  >在視覺上相似，但插件提供了不同的功能。 要考慮的關鍵功能包括：

  列的大小：

  動態列的尺寸提供更大的靈活性。
  排序和過濾：
  • 啟用動態佈局調整而無需重組。 > 動畫：
  >通過動畫佈局更改來改善用戶體驗。
  • >動態元素：
  允許添加/刪除元素，而無需頁面刷新。
  • >佈局選項：
  定制列寬度，天溝大小和對齊方式。 >
  • >使用插件創建砌體佈局（Masonry.js示例）：
  • 此示例使用流行的Masonry.js插件：
  >
  步驟1：

  在您的html的末端include 。

  步驟2：

  >創建具有不同寬度和高度的元素，共享一個共同的類（例如，“ item”）。 >masonry.pkgd.min.js步驟3：

  >初始化磚石插件：

  <code class="language-html"></code>

  結論：

  使用插件可以輕鬆實現砌體佈局。實驗不同的插件和設置以獲得預期的結果。

  <code class="language-html"><div id="masonry">
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... more items ... -->
  </div></code>

  （包括常見問題解答，其餘的原始內容在很大程度上被省略了，因為它在很大程度上重複了上面已提供和解釋的信息。

以上是了解砌體佈局 - 站點點的詳細內容。更多資訊請關注PHP中文網其他相關文章！