Question

我正在开发一个wordpress主题，我使用Isotope或Masonry进行砌体布局。我还使用Visual Composer插入我映射到Visual Composer的自定义元素。我有一个没有样式的容器，所有这些项目都有一个带有类＆＃34; overlay＆＃34;它绝对定位，宽度和高度均为100％。它的目的是将白框（类＆＃34;内容＆＃34;）放在其中。 Isotope在以前的WordPress主题中给了我很多时间..我不明白为什么。这是图像。

这是项目的标记：

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

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

Masonry JS：

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

.masonry-item CSS：

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

看起来如果他们所有人都有相同的宽度，如50％，它将完美无瑕地工作。就像迪帕克托马斯在评论中指出的那样。但是，只要我为每个元素添加一个随机样式，如30,40,50,60,70％的宽度，它就会开始破碎。在某些情况下，它会将元素放在彼此旁边，大多数时候如果它们不在第一行中则会在它们之间留下间隙，而有时它会将它们叠加在另一个上面，即使这两个项目可以显然要放在一边，仍然有空余。

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

提前致谢！

Answer 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） - ＆gt;是可选的。通常应用动态ajax。

Answer 2

根据您共享的代码，似乎砌体不会为其项目提供默认大小。

对于每个砌体项目，请提供额外的课程

例如：

.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>

那应该解决它。

Answer 3

问题是第一个砌体项目被视为同位素的columnWidth选项。因此，只需确保第一次是您的列中最小的一个。

Masonry / Isotope.js无法正常工作

3 个答案: