标签: jquery-masonry

我试图让jQuery Isotope的砌体布局在这个测试网站上运行:http://make.truliablog.com/test-filters

它似乎正在对它们进行正确排序,但是当您调整窗口大小并调整块时动画不起作用.我该如何解决这个问题？

这是相关的jQuery代码.

<script>
    jQuery(document).ready(function(){
        jQuery('#container').isotope({
            masonry : {
                columnWidth : 50
            }
        });

        // Filter buttons
        jQuery('#filters a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#container').isotope({ filter: selector });
            return false;
        });
    });
</script>

我想在下面的页面上找到每个:

http://snowbird.camorada.com/test.php

查看如下的砖石格式:

http://masonry.desandro.com/demos/basic-single-column.html

这是我希望以砖石格式出现的div:

      <div class="tiled">
          <div class="newz_caption" style="background: #FFFFFF;">
               //content
          </div>
      </div>

这是我用来选择的代码,(抱歉评论)

<script>
    $(function(){
      $('#container').masonry({
        // options  
        itemSelector : '.tiled',
        isAnimated: !Modernizr.csstransitions

      });
    });
    </script>

我使用Vanilla Masonry(原始JS,非jQuery版本)如下:

在头部:

<script id="masonry" type="text/javascript" src="resources/js/masonry.js"></script>

身体:

<script>
window.onload = function() {
  var wall = new Masonry( document.getElementById('ext-component-3'), {
    columnWidth: 145
  });
};
</script>

但我一直在:

Uncaught ReferenceError: Masonry is not defined 
Uncaught TypeError: Cannot call method 'appendChild' of undefined

有谁知道我的设置有什么问题？

我知道InfiniteScroll和Masonry合作得很好.但我正在使用Yii的无限滚动扩展(称为yiinfinite-scroll)并尝试在其上应用砌体.无限卷轴本身也很完美,砌体本身也是如此.但是在InfiniteScroll尝试加载一组新图像(我有一个图像页面)之后,InfiniteScroll的回调部分似乎没有触发,因为新添加的元素中没有任何砌体代码并且出现在后面第一个可见的项目.(我知道经常会报告这个错误,但到目前为止我找到的解决方案并不适用于我).

我显示图片的结构如下所示:

<div class="items">
 <div class="pic">...</pic>
 <div class="pic">...</pic>
...
</div>

第一页加载看起来像这样

<div class="items masonry" style="...">
   <div class="pic masonry-brick" ...></div>
   <div class="pic masonry-brick" ...></div>
   ...
</div> // everything's fine, masonry is injected into the code

无限滚动动态加载新图像后,它们看起来像这样:

<div class="items masonry" ...></div>
   <div class="pic masonry-brick" ...></div>
   ...
   // appended pics:
   <div class="pic"></div>
   <div class="pic"></div>
</div> // so no masonry functionality was applied

我的砌体代码:

    $(function (){  
        var $container = $('.items');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.pic',
            columnWidth: 405
        });
      });
   });

   $container.infinitescroll({
        // normally, the options …

我注意到当使用jQuery Isotope或Masonry与流畅/响应式网站时,元素会在浏览器窗口调整大小时暂时重叠.请参阅下面的图片,这是此演示的截图.您还可以在Isotope 网站上看到这种情况.

有什么办法可以避免这种重叠吗？

有哪些方法可以使视图之间的垂直间距相同,如下图所示？

(我有什么)

(我需要什么)

我已经尝试过使用LinearLayout的高度来为每个"瓷砖"充气,但似乎无法解决这个问题.

我已经初始化砌体插件 - 工作正常，

比我销毁它的媒体宽度 <= 767px - 它被销毁了

但是当我回到媒体宽度 > 767px 并再次初始化砌体时，它不起作用。

为什么？

或者是否有其他解决方案可以关闭 masonry 插件，然后在某些事件中打开它？

这是我的代码：

var masonryData = {
    isInitLayout: true,
    isResizeBound: false,
    itemSelector: '.item',
    columnWidth: 300,
    gutter: 20,
    transitionDuration: '0.5s'
};

function initializeMasonry(masonryData){
    if (jQuery().masonry) {
        var masonryContainer = jQuery('.masonry').masonry(masonryData);
        jQuery(masonryContainer).imagesLoaded(function(){
            jQuery(masonryContainer).masonry(masonryData);
        });
    }
}

function destroyMasonry(){
    if (jQuery().masonry) {
        jQuery('.masonry').masonry();
        jQuery('.masonry').masonry('destroy');
    }
}

我正在使用查询插件，所以我对 js 媒体查询使用匹配/不匹配方法：

$.Site.Match.smallScreen = function() {
   ...
   destroyMasonry();
   ...
}

$.Site.Match.mediumScreen = function() {
   ...
   initializeMasonry(masonryData);
   ...
}

非常感谢您的帮助

我正在研究一些涉及响应式砌体布局的东西。我有一个最大宽度为 的容器，960px但会随着浏览器缩小。我的网格项目具有基于百分比的宽度（100%、66.666666etc%、33.33333etc%）。出于某种原因，当我将函数传递给columnWidth选项时，它总是为容器提供高度 0。这就是我实例化 Masonry 的方式。

$(window).load(function() {
  var $container;
  $container = $("#grid_container");
  $container.masonry({
    columnWidth: function(containerWidth) {
      return containerWidth / 3;
    },
    itemSelector: ".grid_item",
    isFitWidth: true,
    isResizable: true,
    gutter: 10
  });
});

知道为什么要这样做吗？由于我正在使用$(window).load它应该能够很好地计算高度。我在这里错过了一些非常明显的东西吗？是否根本不可能在 Masonry 中使用百分比列宽？

我正在使用此工具http://rvera.github.io/image-picker/在Flask网络应用程序中选择图像.它工作正常,但我可以找到任何方式在显示时将所有图像设置为固定大小.

编辑:作者建议使用Masonry作为网格对齐的工具.它有参数,如列宽.任何人都可以举一个使用Masonry和Image-picker的例子吗？

演示版

全屏演示

即使有空间，砖石也无法填充小间隙。

示例：主容器宽度：896px；

除了第一个具有橙色背景的容器之外，还有一个间隙，Masonry 可以在其中再添加一个容器（橙色 BG 第二个容器），但这种情况没有发生。我不确定我错在哪里。:-(

您需要最大化窗口才能看到问题。

JS：

jQuery(window).load(function() {
            /* var container = document.querySelector('.masonry-container');
            var msnry = new Masonry(container, {
                itemSelector: '.itemMas',
                columnWidth: 15,
                gutter: 1,
                isFitWidth: true
            }); 
             */
            $ = jQuery;
                var $container = $('.masonry-container').masonry();
                var msnry;
                $container.imagesLoaded( function(){
                    msnry = new Masonry( $container[0], {
                        itemSelector : '.itemMas',

                        isAnimated: true,
                        isFitWidth: true
                    });
                })
         });