JQuery Masonry图像没有正确堆叠

Question

所以我发起了一个简单的砌体版本来显示我的图像，但它并没有像我预期的那样流动。

这就是我使用imagesLoaded插件初始化砌体的方法。

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

但是，正如您从下图所示，图像显示在右侧而不是左侧。

每个.grid-item都有一个浮动或左侧，以便将项目堆叠到左侧。什么会导致这种行为？

Answer 1

从图片

中删除direction: ltr;后，尝试将float:left;添加到容器div中

Answer 2

你有没有理由使用花车并留下砌体？根据我的经验，这可能会导致布局问题，插件的整个目的是为您处理布局。

如果你想要以完美的网格模式堆叠，你可能需要指定高度和宽度的精确值，因为即使是1个像素也可能导致砌体向右堆叠，因为这就是它的设计目的。

如果您的照片具有相同的宽高比，但如您所提到的那样，您可以使用特定尺寸的照片进行纵向和横向（超广？）照片。所以你可以拍一张肖像照片：

<div class="grid-item v2"></div>
.grid-item { height: 100px; }
.grid-item .v2 { height: 200px }

如果指定了装订线，您可能需要将装订线值添加到.v2高度以进行补偿。