Question

我准备像砖石一样的代码。

规则很简单： - 总是4列 - 每个元素具有相同的宽度

我的定位元素脚本如下所示（onload）：

var line = 0;
var row = 0;
var heights = [];

// Count elements on one line
$('img').each(function() {
    if ($(this).prev().length > 0) {
        if ($(this).position().top != $(this).prev().position().top) {
            return false;
        }

        line++;
    } else {
        line++;
    }
});

for (i = 0; i < $('img').length; i++) {
    if (i % line == 0 && i > 0) {
        row++;
    }

    // Set position in first row
    $('img:eq(' + i + ')').css({
        'position': 'absolute',
        'top': '0px',
        'left': $('img:first').outerWidth(true) * i
    });

    // Set position for next rows
    if (row > 0) {
        $('img:eq(' + i + ')').css({
            'top': parseFloat($('img:eq(' + (i - line) + ')').offset().top + $('img:eq(' + (i - line) + ')').outerHeight(true) - $('img:first').offset().top),
            'left': parseFloat($('img:eq(' + (i - line) + ')').css('left'))
        });
    }
}

点击

删除元素的功能

$('img').on('click', function() {
    $('img').css({
        'transition': 'all 3s'
    });

    $(this).remove();

    $(window).trigger('load');    
});

我想问两个问题：

如何设置div包装器的高度？
为什么我删除一个元素（by 点击）元素没有正确定位？我跑方法再次通过触发器。

jsfiddle上的所有代码：http://jsfiddle.net/n8v3X/3/

Answer 1

（1） div不会得到高度，因为它的孩子是位置绝对元素，高度可以通过javascript设置。

＆GT;＆GT;计算每列中的总img高度

＆GT;＆GT;找到哪一列图像具有更高的高度并设置为包裹div

/* Logic to Calculate Height */
var wrap_height = 0;
var column_array = [0, 0, 0, 0];
for (i = 0; i <= row; i++) {
    var temp_height = 0;
    for (j = 0; j < line; j++) {
        //curr element in a row :  j+ ( i * line );
        var curr_height = $('img:eq(' + (j + (i * line)) + ')').outerHeight(true);

        column_array[j % line] += curr_height;

    }
}
for (i = 0; i < column_array.length; i++) {
    if (column_array[i] > wrap_height) {
        wrap_height = column_array[i];
    }
}

$('#wrap').css({
    height: wrap_height + 'px'
});

（b）没有正确定位，因为，

prev元素的新位置无法在循环中正确计算。

$（'img：eq（'+（i - line）+'）'）＆gt;＆gt;顶部和左边的值来自下面的代码，在它被设定到新的位置之前。

if (row > 0) {
            $('img:eq(' + i + ')').css({
                'top': parseFloat($('img:eq(' + (i - line) + ')').offset().top + $('img:eq(' + (i - line) + ')').outerHeight(true) - $('img:first').offset().top),
                'left': parseFloat($('img:eq(' + (i - line) + ')').css('left'))
            });
        }
    }

我使用html5的数据属性来解决这个问题。

小提琴： http://jsfiddle.net/aslancods/n8v3X/152/

Answer 2

您需要计算包装器的高度，因为绝对定位的元素不在布局中。他们有自己的布局背景。

添加处于相同水平位置的子元素的高度，并从那里设置父包装的高度。

此外，当删除元素时，您需要重新计算整个堆栈的位置。

Answer 3

这是我的去处： Fiddle Demo

基本上它与“position:absolute;”方法不同。它提供了更灵活的布局，因为现在您可以轻松地对一个项目执行操作，并且其列上的所有项目都将相应移动，如果您要重新排列图像，仍然可以调用“spreadImages()”方法在页面上。 JS为每列（float:left;）创建实际元素，并在其中 - 图像全部为display:block;。

<强> CSS

div.column {
    width:100px;
    padding:10px 5px 0px;
    float:left;
    border:solid 1px red;
}
div.column img {
    display:block;
    margin-bottom:10px;
    width:100%;
}

<强> JS

$(function () {
    var images,
        columns,
        numOfColumns = 4,
        container = $('#container');

    // create rows
    var createColumns = function() {
        for (var i = 0; i < numOfColumns; i++) {
            $('<div />').attr('id', 'row_' + i)
                        .addClass('column')
                        .appendTo(container);
        }
        columns = $('.column', container);
    };

    // empty rows
    var resetColumns = function(){ columns.html(''); };

    // returns the shortest column at the moment
    var getShortestColumn = function() {
        var shortestColumn;
        columns.each(function () {
            if (!shortestColumn) {
                shortestColumn = $(this);
            } else if ($(this).outerHeight() < shortestColumn.outerHeight()) shortestColumn = $(this);
        });
        return shortestColumn;
    };

    // spread images between rows
    var spreadImages = function() {
        images = $('img');
        resetColumns();
        images.each(function () {
            var img = $(this);
            var height = img.outerHeight();
            var shortestColumn = getShortestColumn();
            shortestColumn.append(img);
        });
    };

    var init = function(){
        createColumns();
        spreadImages();
    };
    init();
    container.on('click', 'img', function(){
        var img = $(this);
        img.animate({height:0, opacity:0}, function(){
            img.remove();
            spreadImages();
        });
    });
});

最简单的脚本，如砌块

3 个答案: