jQuery 同位素 —居中且流畅/响应灵敏

Question

我问一个关于 Isotope 的问题，

它是一个很棒的 jQuery 插件。

我已经玩了一段时间了，但我对 javascript 的了解还不够，无法结合两种同位素技术，响应同位素和中心同位素。

我已经成功地使用了响应式 mod，它运行得很好，只是现在我需要将整个内容放在 div 中。居中布局模式和响应模式都没有记录，所以我在让它工作时遇到了一些麻烦。基本上，居中布局模式的说明是：

要使用此 mod，请复制演示页面源代码中找到的修改后的方法。

不幸的是，在查看源代码中发生了各种各样的 javascript 事情，而我没有足够的 javascript 经验来挑选它并将其与我已经工作的响应式脚本结合起来。

任何帮助将不胜感激。

一个网站，其中包含我需要的工作示例。

我正在试验的网站。

我认为在 Firefox 中效果更好。

Answer 1

以下是 David DeSandro 本人提供的示例：

http://jsfiddle.net/desandro/P6JGY/6/

Answer 2

这个jsfiddle可能会解决您的问题：http://jsfiddle.net/schmidjon/6Z3sn/。
这是带有断点的同位素的简单扩展：

(function ($) {
var $container = $('.example'),
    colWidth = function () {
        var w = $container.width(), 
            columnNum = 1,
            columnWidth = 0;
        if (w > 1200) {
            columnNum  = 5;
        } else if (w > 900) {
            columnNum  = 4;
        } else if (w > 600) {
            columnNum  = 3;
        } else if (w > 300) {
            columnNum  = 2;
        }
        columnWidth = Math.floor(w/columnNum);
        $container.find('.item').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    },
    isotope = function () {
        $container.isotope({
            resizable: false,
            itemSelector: '.item',
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 4
            }
        });
    };
    isotope();
    $(window).smartresize(isotope);
}(jQuery));

来源：在流体布局中使用 jQuery Isotope 进行砌体

Answer 3

尝试在子内容的每个类的 css 文件上使用转换。它应该有帮助，而且可能会更慢

。css

 -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

希望这个工作正常