Question

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

我在div-Element中通过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>

等...

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 lib都没有任何效果。

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

路

Answer 1

在实际加载lib之前，您正在调用$(document).ready(function() { $(window).scroll(function() { if($(this).scrollTop() > 100){ $('#goTop').animate({ top: '20px' }, 100); } else{ $('#goTop').animate({ top: '-100px' }, 100); } }); $('#goTop').click(function() { $('html, body').animate({ scrollTop: 0 }, 500 ); }); });。将其包装到imagesLoaded回调中。

document.ready

砌体图片库不起作用，内联Javascript没有任何效果

1 个答案: