标签: jquery-masonry

我有以下问题.Isotope始终将容器的高度设置为0px.

我检查了花车和其他常见的问题来源.一切似乎都很好.

我的被​​激活元素的类看起来像这样:

div#image-area div {
    width: 6.25%;
    height: 6.25%;
}

对于我的生活,我无法弄清楚如何移除宽檐槽并在使用流体/百分比布局时设置为0.

我已经尝试设置gutterWidth: 0和边距和填充0%,但它仍然无法正常工作.

这是Masonry网站的代码.

$('#container').masonry({
    itemSelector: '.box',
    gutterWidth:0,
// set columnWidth a fraction of the container width
    columnWidth: function (containerWidth) {
        return containerWidth / 5;
    }
});

CSS

.box {
    width:33%;
    margin:0%;
    padding:0%
}
.box img {
    width:100%;
    height:auto
}

我需要调整什么？

我在这个页面上设置了Masonry演示.

我看到插件加载正常,没有错误.我已经定义了列宽,但它仍然不起作用.

我找了几个小时,找不到任何错误？!你知道问题是什么吗？

我正在使用此插件来设置网格库.此图库显示X个图像.ajax调用后,这些图像被加载到HTML中:

$.ajax({
    type:"POST",
    dataType:"html",
    contentType:"application/x-www-form-urlencoded",
    url:url,
    data:data,
    success:function(response) {

       $("#masonry-container").html('<div id="content">'+response+'</div>');
       initialiceMasonry();

    }
    ,timeout:10000
});

如您所见,在附加它调用的服务器响应之后 initialiceMasonry();

var container = $("#content");

container.masonry({
    columnWidth:190,
    itemSelector:".item",
    gutter:8,

});

在初始化之后,图像显示重叠,寻找关于此插件的另一个问题我找到了使用的选项,imagesLoaded但它返回给我这个错误:

Uncaught TypeError: undefined is not a function 

并选择我呼叫的线路 imagesLoaded

从服务器我得到这个HTML:

    <div class="item" data-id="160">

        <img src="image_1.jpeg" />

        <div class="options">
            <h4>Section 1</h4>
            <a href="section_1.php">Section 1</a>
        </div>

    </div>

如何正确初始化砌体以修复重叠问题？

滚动工作正常,但我想摆脱动画.

我尝试了所有推荐的解决方案,例如这里提到的一个http://desandro.github.io/masonry/docs/animating.html但没有任何效果.

砌筑规范:

<script src="{{asset('js/vendor/masonry.pkgd.min.js')}}"></script>
<script src="{{asset('js/vendor/waypoints.min.js')}}"></script>
<script src="{{asset('js/vendor/waypoints-infinite.js')}}"></script>
<script>
    $(window).load(function () {
        /*var container = $('.infinite-container');*/
        var container = $('.infinite-container').masonry({
            // options...
            itemSelector: '.wish-box',
            isAnimated: false,
            animated: false,
          });

        $('.infinite-container').waypoint('infinite', {
            container: 'auto',
            items: '.wish-box',
            more: '.infinite-more-link',
            offset: 'bottom-in-view',
            loadingClass: 'infinite-loading',
            onBeforePageLoad: $.noop,
            animate: false,
            onAfterPageLoad: function () {
                try {
                    container.masonry('reloadItems');
                    container.masonry('layout');
                } catch (err) {
                    alert(err.message);
                }
            }
        });
    });
</script>

代码waypoints-infinite.js:

// Generated by CoffeeScript 1.6.2
/*
Infinite Scroll Shortcut for jQuery …

我的代码是

var ssMasonryFolio = function () {
  var containerBricks = $('.masonry');
  containerBricks.imagesLoaded(function () {
      containerBricks.masonry({
          itemSelector: '.masonry__brick',
          resize: true
      });
  });
};

它在 imagesLoaded 函数上给出错误