砌体中的不均匀柱

Question

快速提问，与 Masonry 斗争。是否可能有不均匀的柱子？请参见下面的示例：

如您所见，图片的高度不同。只要我使用 50-25-25 之类的列，我就没有问题。

我的代码如下：

var $container = $('.masonry');
$container.imagesLoaded( function() {
    $container.masonry({
        itemSelector: '.item',
        columnWidth: '.item',
        layoutMode: 'fitRows'
    });
});

我的HTML如下：

<div class="masonry">
    <a href="#" class="item fancybox large" ><img src="http://placehold.it/400x250"></a>
    <a href="#" class="item fancybox small" ><img src="http://placehold.it/250x250"></a>
    <a href="#" class="item fancybox medium" ><img src="http://placehold.it/350x200"></a>
    <a href="#" class="item fancybox small" ><img src="http://placehold.it/250x250"></a>
    <a href="#" class="item fancybox large" ><img src="http://placehold.it/400x250"></a>
    <a href="#" class="item fancybox medium" ><img src="http://placehold.it/350x300"></a>
</div>

我的CSS如下：

.masonry .item img {
  width: 98%;
  padding: 1%;
  height: auto;
  max-width: 100%;
}
.masonry .item.small  {  width: 25%; }
.masonry .item.medium {  width: 35%; }
.masonry .item.large  {  width: 40%; }

然而我的网格总是乱七八糟...像这样...

知道哪里出了问题吗？没有控制台错误。我在不同的页面上使用同位素。我有点混淆 Masonry 和 Isotope，因为 Isotope 使用 Masonry，但也有一个名为 MasonryHorizontal 的选项，我似乎在独立的 Masonry 上找不到...

谁有见解？

Answer 1

是的，您可以使用 Masonry 实现此布局。但我会推荐 Packery 这种不均匀的布局。它非常适合这些类型的布局，并且需要更少的代码来设置。设置项目尺寸后，您只需要初始化Packery。

$('.grid').packery();

参见示例：http://codepen.io/desandro/pen/dPzprJ

要使用 Masonry 修复您的示例，您需要将 columnWidth 设置为项目宽度的倍数。目前它只是设置为第一项的宽度。它应该设置为 5%。要将 columnWidth 设置为百分比值，请使用 element sizing.

<div class="grid">
  <!-- grid-sizer for element sizing -->
  <div class="grid-sizer"></div>
  <div class="item large h2">40%</div>
  <div class="item small h2">25%</div>
  <div class="item medium">35%</div>
  <div class="item medium h2">35%</div>
  <div class="item small">25%</div>
  <div class="item large">40%</div>
</div>

在CSS中设置.grid-sizer宽度。

.grid-sizer { width: 5%; }

在 Masonry 选项中将 .grid-sizer 设置为 columnWidth。同时设置 itemSelector.

$('.grid').masonry({
  itemSelector: '.item',
  columnWidth: '.grid-sizer'
});

参见示例 http://codepen.io/desandro/pen/dPzpBd

What is the difference between Isotope, Masonry, and Packery?

Isotope、Masonry 和 Packery 的相似之处在于它们都是布局库。他们的许多选项和方法都是相同的。

Masonry 进行级联网格“砌体”布局。 Packery 进行装箱布局，这允许它用于可拖动的交互。

同位素进行排序和过滤。 Isotope 使用砖石和包装布局，以及其他布局。

Masonry 已获得 MIT 许可，可免费使用和分发。 Isotope 和Packery 拥有专有许可，您可以购买许可用于商业项目，或免费用于开源项目。

砌体中的不均匀柱

Uneven columns in Masonry

html

css

masonry

What is the difference between Isotope, Masonry, and Packery?