0

このようなポートフォリオページを作りたいです。
組積造のJqueryプラグインを使用しています。
したがって、ボックスをクリックすると、他のボックスの下にあるのではなく、拡張して押す必要があります。
つまり、基本的に、クリックすると、クリックしているボックスに新しい幅と高さを追加し、ボックスに別の幅と高さを表示divします。

andをインラインで追加するheightと、他のボックスが適切にプッシュされますが、jQueryを使用すると、それらの下に展開されます。これがフィドルです。widthdiv

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

彼らのドキュメントのこのセクションをチェックしてください：石積み：containerStyle

于 2012-12-21T09:25:43.010 に答える