jquery - 单击展开的 div 行为很奇怪

Question

我想做一个像this one这样的投资组合页面.
我正在使用 masonry Jquery 插件。
所以，当我点击一个框时，它应该展开并插入其他框，而不是位于它们下方。
所以基本上，在单击时我会向我单击的框添加新的宽度和高度，并在框中显示另一个 div。

如果我添加 height 和 width 内联，div 会像它应该的那样推送其他框，但是当我使用 jQuery 时，它只是在它们下面扩展。 Here is a fiddle.

html:

<div class="container">
    <div class="box" id="1" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_1"></div>
        <div class="box-content" id="bc_1">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 1</span>
        </div>
        <div class="big-box-content" id="bbc_1">
            <h1 class="title">Titlul clipului aici 1</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>
    </div>

    <div class="box" id="2" onmouseover="$(this).addClass('hover');" onmouseout="$(this).removeClass('hover');">
        <div class="close-btn" id="cb_2"></div>
        <div class="box-content" id="bc_2">
            <img src="image.png" />
            <span class="title">Titlul clipului aici 2</span>
        </div>
        <div class="big-box-content" id="bbc_2">
            <h1 class="title">Titlul clipului aici 2</h1>

            <img src="image.png" />
            <p>Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese. Descrierea clipului aici in cateva randuri bune sa vedem cum iese.</p>
        </div>

    </div>
     .....
     .....
</div>

jQuery:

$('.box').click(function () {
    id = this.id;
    //if there is any box opened, close it
    $('.close-btn').css('display', 'none');
    $('.box-content').css('display', 'block');
    $('.big-box-content').css('display', 'none');
    $('.box').css('width', '200px').css('height', 'auto').css('padding', '10px');
    // open the clicked one
    $('#' + id).css('width', '650px').css('height', 'auto').css('padding', '15px');
    $('#bc_' + id).css('display', 'none');
    $('#bbc_' + id).css('display', 'block');
    $('#cb_' + id).css('display', 'block');
});

Answer 1

使用masonry的reload功能。

    $(function(){

    $('.container').masonry('reload');

});

jsfiddle:http://jsfiddle.net/WA347/45/