0

初めて石積みを使用していますhttp://masonry.desandro.com/

私はそれをすべてセットアップしましたが、ほとんどは機能しているように見えますが、ドラッグすると、ボックスの配置場所に奇妙な選択をしているようです。

これが意味することは、中サイズのオブジェクトの後に小さなオブジェクトが続き、その後に中サイズのオブジェクトが続き、別の小さなオブジェクトが続く可能性があるということです

一番上の行にミディアムを配置する代わりにスケールインすると、次の行に2つの小さいものが隣り合い、もう1つのミディアムが一番下に配置され、順序が維持され、全体が無意味になります。

ここにフィドルがありますhttp://jsfiddle.net/danwhitmarsh/zgjBy/

そのフィドルで、結果とjavascriptの間のバーを大きくしたり小さくしたりすると、これが明らかになります

ここにいくつかのサンプルコードがあります

html

<main id="main" class="js-masonry" data-masonry-options='{ "columnWidth": 320, "itemSelector": ".module","isFitWidth": true }'>
    <!-- INTRO MODULE -->
    <div class="module med-width med-height">

    </div>
    <!--EXAMPLE OF SMALL SMALL MODULE-->
    <div class="module sml-width sml-height">

    </div>

    <!--EXAMPLE OF MEDIUM SMALL MODULE -->
    <div class="module med-width sml-height">

    </div>

    <!--EXAMPLE OF SMALL SMALL MODULE-->
    <div class="module sml-width sml-height">

    </div>

</main>

そしていくつかのcss

    * {
    padding:0px;
    margin:0px;
    font-family: Arial;
}



#main{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.sml-width {
    width: 320px;
    background-color:#ccc;
}
.med-width {
    width: 640px;
    background-color:#000;
}
.sml-height {
    height: 320px;
    background-color:#ccc;
}
.med-height {
    height: 640px;
    background-color:#000;
}

誰でも助けることができます - 設定がありませんか?

4

1 に答える 1

0

著者と話した後、彼は彼が持っている別の製品について私にアドバイスしました

http://packery.metafizzy.co/

これはうまくいくようです。それは実際に石工がしなかった不足しているスペースにブロックをはめ込みます。

ありがとう

ダン

于 2013-10-09T22:41:54.510 に答える