0

我刚刚将 Masonry Lib 包含到我的 wordpress 网站中以显示图片库： http: //letpack.lukasoppler.ch/geschuetzte-arbeitsplaetze/gebaeudeunterhalt/

我通过 div 元素中的 html 标记调用砌体，它看起来像这样：

<div class="grid" data-masonry="{ " itemSelector" ".grid-item" }">
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
    <div class="grid-item">
        <img src="image-url" width="700" height="470">
    </div>
</div>

ETC...

CSS 样式看起来像：

.grid-item > img {
    height: auto;
}
.grid-item {
  float: left;
  padding: 0 10px 10px 0;
  width: 50%;
}

我的第一个问题是标头中的以下代码不起作用，因此我无法使用 imageloaded lib 来防止图像在未缓存时重叠。当我删除 html json 代码时，砌体根本不起作用。

<script type="text/javascript" language="javascript">
    // external js: masonry.pkgd.js, imagesloaded.pkgd.js

    // init Masonry after all images have loaded
    var $grid = $('.grid').imagesLoaded(function () {
        $grid.masonry({
            itemSelector: '.grid-item',
            percentPosition: true,
            columnWidth: '.grid-sizer'
        });
    });
</script>

Masonry + Image Loaded 包含在标题部分中。

但是调用 masonry 的 java 脚本和 imageloaded 的库都没有任何效果。

你能帮我分析一下我的问题吗？

卢克

4

1 回答 1

0

您imagesLoaded在实际加载该库之前调用。将其包装到document.ready回调中。

<script type="text/javascript" language="javascript">
    $(function() {
        // external js: masonry.pkgd.js, imagesloaded.pkgd.js

        // init Masonry after all images have loaded
        var $grid = $('.grid').imagesLoaded(function () {
            $grid.masonry({
                itemSelector: '.grid-item',
                percentPosition: true,
                columnWidth: '.grid-sizer'
            });
        });
    });
</script>
于 2017-01-20T19:28:27.360 回答