Masonry/Isotope.js 无法正常工作答案

【问题标题】：Masonry/Isotope.js not working correctlyMasonry/Isotope.js 无法正常工作
【发布时间】：2016-04-20 17:56:13
【问题描述】：

我正在开发一个 wordpress 主题，我正在使用 Isotope 或 Masonry 进行砌体布局。此外，我正在使用 Visual Composer 插入我映射到 Visual Composer 的自定义元素。我有一个没有样式的容器，所有这些项目都有一个带有“覆盖”类的 div，它绝对定位并且具有 100% 的宽度和高度。它的目的是将白盒（类“内容”）定位在其中。 Isotope 在以前的 wordpress 主题中一直让我很难受。我不知道为什么。这是图像。

这是一个项目的标记：

<div class="masonry-item">
    <img/>
    <div class="overlay">
        <div class="content">
            <!-- Just some text here
        </div>
    </div>
</div>

任何建议都非常受欢迎，因为我似乎无法让它以任何方式工作。大多数布局方法最终都会与容器最左上角的所有项目重叠。是的，我尝试过使用 ImagesLoaded.js，但并没有什么不同。

砌体JS：

$(".masonry-grid").isotope({
            itemSelector: '.masonry-item'
        });

.masonry-item CSS：

.masonry-item {
    position: relative;
    margin-bottom: 30px;
}

似乎如果它们都具有相同的宽度（如 50%），它将完美地工作。就像在 cmets 中提到的 Deepak Thomas 一样。但是，一旦我为每个元素设置了随机样式，例如 30、40、50、60、70% 的宽度，它就会开始中断。在某些情况下，它会将元素彼此相邻放置，如果它们不在第一行中，大多数情况下会在它们之间留下间隙，而其他时候它只会将它们堆叠在一起，即使这两个项目可以显然被并排放置，仍然有空间。

编辑：尝试删除图像。没有区别。

提前致谢！

【问题讨论】：

嗨，'masonry-item' 的 CSS 规则是什么？
@DeepakThomas 已编辑
您可以尝试在 .masonry-item 中添加“width:50%”作为试用版吗？
这太奇怪了。他们现在都完美地排列在一个砖石般的网格中。任何的想法..？它可以工作，但现在它们的宽度都是 50%
img 可能会弄乱宽度，图像的 css 是什么？也许尝试删除 img 标签以查看它的行为

标签： javascript jquery html css wordpress

【解决方案1】：

试试这个：

var $post_masonry = $('.masonry-grid');
 $(document).ready(function () {           
if ($post_masonry.length) {

                    $post_masonry.isotope({
                        itemSelector: '.masonry-item',
                        layoutMode: 'masonry',
                        percentPosition: true,
                        masonry: {
                            columnWidth: '.masonry-item'
                        }

                });
        }
 });

推荐使用 imagesloaded.pkgd.min.js 在图像已经加载时应用同位素。

var $post_masonry = $('.masonry-grid');
 $(document).ready(function () {           
if ($post_masonry.length) {
                var $masonry = $post_masonry.imagesLoaded(function() {
                    $masonry.isotope({
                        itemSelector: '.masonry-item',
                        layoutMode: 'masonry',
                        percentPosition: true,
                        masonry: {
                            columnWidth: '.masonry-item'
                        }
                    });
                });
        }
 });

if ($post_masonry.length) --> 是可选的。通常与动态ajax一起应用。

【讨论】：

【解决方案2】：

从您分享的代码来看，masonry 似乎没有为其项目提供默认尺寸。

对于每一个砌体项目，给一个额外的类

例如：

.half { width: 50% }
.full { width: 100% }
.pad { padding: 15px }

并在您认为合适的项目上使用它。

例如：

    <div class="masonry-item half">
    <div class="pad">
    <img src="xyz" />
    <div class="overlay">
        <div class="content">I'm the overlay content</div>
    </div>
    </div>
    </div>

这应该可以解决。

【讨论】：

【解决方案3】：

问题是第一个砌体项目被视为同位素的columnWidth 选项。所以只要确保第一次是你的列中最小的一个。

【讨论】：