了解砌体布局 - 站点点

>现代网络设计格局正在不断发展。 基于桌子的列表和偏移分页正在变得过时，而无限滚动的砖石布局正在越来越受欢迎。本文深入研究了砌体布局及其应用的复杂性。

钥匙要点：

>砌体布局，也称为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：

  >初始化砖石插件：

  <🎜>

  结论：

  使用插件可以轻松实现砌体布局。实验不同的插件和设置以获得预期的结果。

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

  （包括常见问题解答，其余的原始内容在很大程度上被省略了，因为它在很大程度上重复了上面已提供和解释的信息。

以上是了解砌体布局 - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！