砌体中的柱子不均匀

Question

快速提问，与砌体挣扎。是否可能有不均匀的列？见下面的例子：

您可以看到图像的高度不同。只要我使用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%; }

然而我的网格却一直搞乱......就像这样......

有什么可能是错的？没有控制台错误。我在另一页上使用Isotope。我在Masonry和Isotope之间有点困惑，因为Isotope使用了Masonry，但也有一个名为MasonryHorizo​​ntal的选项，我似乎没有在独立的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%; }

在砌体选项中将.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都是相似的，因为它们是布局库。他们的许多选择和方法是相同的。

砌体做级联网格“砌体”布局。 Packery执行bin-packing布局，允许它用于可拖动的交互。

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

Masonry获得麻省理工学院许可，可免费使用和分发。 Isotope和Packery拥有专有许可，您可以在其中购买商业项目的许可，或者将其自由地用于开源项目。