Question

我问的是关于Isotope

的问题

这是一个很棒的jQuery插件。

我已经玩了一段时间了，但是我对javascript结合两种同位素技术responsive Isotope和centered Isotope并不了解。

我已成功使用了响应模式并且效果非常好，除非现在我需要将整个事物集中在一个div中。没有记录中心布局模式以及响应模式，因此我无法使其工作。基本上，中心布局模式的inscructions是：

要使用此mod，请复制演示页面源中的修订方法。

不幸的是，视图源中存在各种各样的javascript事件，我没有足够的javascript经验来解决它，并且还将它与我已经工作的响应脚本结合起来。

非常感谢任何帮助。

A site with a working example of what I need.

My site that I am experimenting with.

我认为在Firefox中效果更好。

Answer 1

以下是David DeSandro本人提供的一个例子：

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

Answer 2

这个jsfiddle可能会解决你的问题：http://jsfiddle.net/schmidjon/6Z3sn/。它是断点的Isotope的简单扩展：

(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));

来源： Using jQuery Isotope for masonry in fluid layouts

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;

希望这个工作

jQuery同位素 - 以中心和流畅/响应

3 个答案: