javascript - 项目大小更改后同位素砌体布局不起作用

Question

我有一个简单的砌体布局。并且需要在点击时更改元素的大小和位置。

这是一个 jsfiddle:http://jsfiddle.net/664cV/12/和代码:

JS

$(function(){
    $('#container').isotope({
        itemSelector: '.box'
    });

    $('.box').click(function(){
        $('.box').width(100).height(100);
        $(this).width(300).height(300);

        $('#container').isotope('reLayout');
    });
});​

CSS

#container {
    width: 400px;
}

.box {
    font-size: 28px;
    width: 100px;
    height: 100px;
}

/* omitted color classes */

HTML

<div id="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div class="box yellow">4</div>
    <div class="box black">5</div>
</div>​

问题是它无法正确处理元素号 1 和元素号 3(见图片)

元素 1 单击(已解决:see answer)

点击元素 3

我做错了什么？

Answer 1

您需要设置 masonry first item width这样，一旦调整大小，同位素将记住此设置而不是新的第一项宽度，从而保持网格一致。

遗憾的是，第三项仍然留有空白，但我认为这是同位素的标准行为，因为它将第四项放在第一行，空闲行，在这种情况下是第一行。

masonry: {
    columnWidth: 100
}

事实上，如果您单击第 7 个框，它也会留下一个空白区域。如果也能找到针对该默认行为的解决方案，那就太好了。

<div class="box red">6</div>
<div class="box blue">7</div>
<div class="box green">8</div>
<div class="box yellow">9</div>
<div class="box black">10</div>