Question

我有很多div，里面有一张图片。图像宽度不同，高度相同。所有的div都是浮动的：左边。这使它们沿着多行传播。

我想要填充网站的整个宽度，因此div应相应地延伸。

我尝试编写一些jQuery来运行所有div并添加像素，但是有一些缺失和奇怪的情况。

$(document).ready(function() {
    $(document).imagesLoaded( function() {
        var items = $('.item'), row_width = $('body').width(), row_items = [], row_items_width = 0;
        $.each(items, function(i, el) {
            var item_width = $(el).width();
            if ((row_items_width + item_width) > row_width) {
                tmp_width = 0;
                $(row_items).each(function(j, elm2) {
                    if (j < (row_items.length - 1)) {
                        $(elm2).css('width', '+=' + Math.round((row_width - row_items_width) / row_items.length));
                        tmp_width += $(elm2).width();
                    } else {
                        $(elm2).css('width', '+=' + (row_width - (tmp_width + item_width)));
                    }
                });
                row_items = [];
                row_items_width = 0;
            } else if (i === items.length - 1) { // look at the very last item
                row_items.push(el);
                row_items_width += item_width;
                tmp_width = 0;
                $(row_items).each(function(j, elm2) {
                    if (j < (row_items.length - 1)) {
                        $(elm2).css('width', '+=' + Math.round((row_width - row_items_width) / row_items.length));
                        tmp_width += $(elm2).width();
                    } else {
                        $(elm2).css('width', '+=' + (row_width - (tmp_width + item_width)));
                    }
                });

            }
            row_items.push(el);
            row_items_width += item_width;
        });
    });
});

我的想法是运行div，每当我找到一个宽度大于网站宽度的地方时，我计算并添加像素到前一个div，然后继续......

我是否在思考这个问题，是否可以更轻松地完成，也许只使用CSS？我已经看过jQuery的插件，例如砌体，同位素等，但它们似乎没有解决这个特定的问题。

Answer 1

这似乎解决了这个问题。只需要进行大量优化。

$(document).imagesLoaded( function() {
    var items = $('.item'), row_width = $('body').width() - 20, row_items = [], row_items_width = 0;
    $.each(items, function(i, el) {
        var item_width = $(el).width() + 60;
        if ((row_items_width + item_width) > row_width) {
            tmp_width = 0;
            $(row_items).each(function(j, elm2) {
                if (j < (row_items.length - 1)) {
                    $(elm2).css('width', '+=' + Math.round((row_width - row_items_width) / row_items.length));
                    tmp_width += $(elm2).width() + 60;
                } else {
                    $(elm2).css('width', '+=' + (row_width - (tmp_width + item_width)));
                }
            });
            row_items = [];
            row_items_width = 0;
        } else if (i === items.length - 1) {
            row_items.push(el);
            row_items_width += item_width;
            tmp_width = 0;
            $(row_items).each(function(j, elm2) {
                if (j < (row_items.length - 1)) {
                    $(elm2).css('width', '+=' + Math.round((row_width - row_items_width) / row_items.length));
                    tmp_width += $(elm2).width() + 60;
                } else {
                    $(elm2).css('width', '+=' + (row_width - (tmp_width + item_width)));
                }
            });

        }
        row_items.push(el);
        row_items_width += item_width;
    });
    $('.item').css('opacity', 1).css('-webkit-animation', 'fadein 2s');
});

在行上均匀拉伸div

1 个答案: