3

TL;DR:このフィドルを参照してください。私が探しているのは、既存のライブラリのサイズを変更するときに遅延することなく、これらのような浮動要素間のギャップを修正する JavaScript doohickey だけです。

より長いバージョン：私が理解しているように、緊密に結びついた要素の壁を作成するための2つの主要なライブラリがあります。石積みと同位体。

ただし、疑わしいほど類似した Web サイトは別として、これらのライブラリは両方とも、滑らかで応答性の高い要素を使用してビューポートのサイズを変更する場合に同じ奇妙な点があります。石積みされた各要素は、最初に個別にサイズ変更され (より大きな溝が作成されます)、1 ビート後に新しいフォームに再配置されます。ここまたはここを参照してください。

これがダサいと思うのは私だけのようです。

パーセンテージで設定された要素の幅とガターを考慮して、同じ石積み効果を達成するにはどうすればよいですか?

これが私が今持っているCSSです：

#wrapper {
    width: 100%;
    overflow: hidden;
}

#wrapper > div {
    width: 46%;
    margin: 0 2% 15px;
    float: left;
}
4

1 に答える 1

1

http://jsfiddle.net/UTB5C/3/

ウィンドウのサイズを変更した後に石積みで選択された要素の結果は少しおかしいので、ウィンドウのサイズが変更されたときにリロードするようにウィンドウにサイズ変更イベントを追加しました

$(function () {

    $('#wrapper').masonry({
        itemSelector: 'div',
        isResizable: true,
        gutterWidth: 5
    });
    $(window).on("resize", function () {
            $('#wrapper').masonry('reload')
    });

});
于 2013-01-22T09:23:31.460 に答える