Question

我问的问题是Isotope（jQuery插件）

我正在寻找一个解决方案，其中项目（图像）适合容器。意味着在调整窗口大小时，项目也应调整大小。物品容器应始终完全填满，右侧没有空间。

我找到了一个完美的例子，这正是我需要的：http://jsfiddle.net/schmidjon/6Z3sn/ 但它不适用于Isotope v2，因为在Isotope v2中删除了smartresize插件。

var $container = $('.example'),
    margin = 10,
    colWidth = function () {
        var w = $container.width(), 
            columnNum   = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } 
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            $(this).css({
                width: columnWidth - margin,
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: margin
            }
        });
    };
isotope();
$(window).smartresize(isotope);

任何人都可以帮助我，如何在Isotope 2.x版本中运行above example

Answer 1

他们从Isotope v2中删除了smartresize功能。

只需在脚本之前自己添加smartresize.js库。

您也可以从中删除以下部分：

// usage:
$(window).smartresize(function(){  
  // code that takes it easy...
});

Answer 2

在Isotope V2中删除了smartresize功能。相反，您可以使用debouncedresize.js

包括debouncedresize.js然后你可以这样做：

替换：

$(window).smartresize(isotope);

使用：

$(window).on('debouncedresize', isotope);

代码示例：http://jsfiddle.net/8a8427x3/

jQuery Isotope v2 Fluid响应式动态图像大小

2 个答案: