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（已解决：查看答案）

单击元素 3

我究竟做错了什么？

Answer 1

您需要设置砌体第一项宽度，以便在重新调整大小后，同位素将记住此设置，而不是新的第一项宽度，以保持网格一致。

可悲的是，第 3 项仍然留有空白，但我认为这是同位素的标准行为，因为它将第 4 项放在第一个自由行，在这种情况下为第 1 行。

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>

Answer 2

砖石和同位素仅使列最大化。您可以从 wookmark jquery 插件中找到解释。当你想最大化列和行时，你需要别的东西。

1. http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout
2. http://www.benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Answer 3

我自己也遇到了这个问题，并通过在容器顶部添加一个空的 div 来修复它，该 div 具有与我的砌体项目相同的选择器，然后添加了 css：

.grid-item:first-child {
    width: 1px;
    height: 0;
    padding: 0;
}

如果您想知道这是否会导致您的第一个项目向右移动一个像素，答案是否定的。我猜这是因为高度为0，所以它不占用空间。我希望这不涉及添加不必要的 HTML，但它似乎工作得很好。