Question

我正在寻找像jQuery Masonry这样的脚本，但非常简单感兴趣的是我只堆叠没有动画，事件等的图像。

Answer 1

也许这就是你所需要的（来自https://gist.github.com/2208329）：

(function($) {
    // Finding min and max values in array
    Array.prototype.min = function() {return Math.min.apply({},this);};
    Array.prototype.max = function() {return Math.max.apply({},this);};
    $.fn.masonry = function() {
        this.each(function() {
            var wall = $(this);
            if (wall.children().length > 0) { // Check if the element has anything in it
                if (wall.children('.masonry-wrap').length === 0) { // checks if the `.masonry-wrap` div is already there
                    wall.wrapInner('<div class="masonry-wrap"></div>');
                }
                var m_w = wall.children('.masonry-wrap'),
                    brick = m_w.children(),
                    b_w = brick.outerWidth(true),
                    c_c = Math.floor(m_w.width() / b_w),
                    c_h = [], this_col, i;
                for (i = 0; i < c_c; i++) {
                    c_h[i] = 0;
                }
                m_w.css('position', 'relative');
                brick.css({
                    'float':'none',
                    'position':'absolute',
                    'display':'block'
                }).each(function() {
                    for (i = c_c - 1; i > -1; i--) {
                        if (c_h[i] == c_h.min()) {
                            this_col = i;
                        }
                    }
                    $(this).css({
                        'top':c_h[this_col],
                        'left':b_w * this_col
                    });
                    c_h[this_col] += $(this).outerHeight(true);
                });
                m_w.height(c_h.max()).parent().addClass('start-transition');
            }
            return this;
        });
    };
})(jQuery);

更新

在此创建纯JavaScript版本→https://github.com/tovic/bricks

Answer 2

这不是答案，但我为客户编写了一个bin-packing算法，实质上砌体脚本也可以这样做。我不知道的是，砌体脚本如何处理跨越多列的多列砖块或砖块。一个简单的解决方案是忽略最小化函数中的宽度，然后用结果和其他列进行调整。通常，您可以查找1d bin-packing算法，例如first-fit，best-fit，last-fit，bad-fit。您可以将它与不同的排序ascendent，descendent和random结合起来。或者您可以自己编写最佳解决方案，但问题是np-complete，这意味着您必须检查n！可能会叠加您的图像。即使使用编译器语言和快速PC，这也需要一些时间。

最简单的jQuery Masonry Script

2 个答案:

更新