0

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

如果我添加height和width内联，div它会像它应该的那样推动其他框，但是当我使用 jQuery 时，它只是在它们下面展开。这是一个小提琴。

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');
});
4

2 回答 2

1

使用砌体的重载功能。

    $(function(){

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

});

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

于 2012-12-21T09:32:52.683 回答
0

我对砖石不是很熟悉，但它似乎增加position:absolute;了元素。我建议你尝试position:relative;改用。

即，改变这一行：

$('.container').masonry({ columnWidth:230 });

到这一行：

$('.container').masonry({ columnWidth:230, position:relative });

查看他们文档的这一部分：masonry: containerStyle

于 2012-12-21T09:25:43.010 回答