10

我在问一个关于同位素的问题

它是一个很棒的 jQuery 插件。

我已经玩了一段时间了，但是我对 javascript 的了解还不够，无法结合两种 Isotope 技术，响应式 Isotope和centered Isotope。

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

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

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

任何帮助将不胜感激。

一个有我需要的工作示例的网站。

我正在试验的网站。

我认为在 Firefox 中效果更好。

4

3 回答 3

9

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

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

于 2012-06-13T09:34:26.977 回答
3

这个 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));

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

于 2013-10-03T15:14:17.477 回答
-1

尝试在您的 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;

希望这个工作

于 2013-09-15T18:34:21.190 回答