Masonry Image gallery 不工作，内联 Javascript 没有任何效果

Question

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

我在 div-Element 中通过 html 标记调用 masonry，它看起来像这样：

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

等...

CSS 样式看起来像：

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

我的第一个问题是 header 中的以下代码无法正常工作，因此我无法使用 imageloaded 库来防止未缓存的图像重叠。当我删除 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>

header 部分包含 Masonry + 图像加载。

但是调用 masonry 的 java 脚本和加载图像的库都没有任何效果。

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

卢克

Answer 1

您在该库实际加载之前调用 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>

Masonry Image gallery 不工作，内联 Javascript 没有任何效果

Masonry Image gallery not working, inline Javascript not taking any effect

javascript

css

jquery-masonry

masonry

image-load