7

メーソンリーを試してみましたが、思い通りに動作させることができません。私が使用する要素は幅と高さが異なりますが、すべてグリッドに収まります (4 つの異なるサイズ、すべて最小 + マージンの倍数)。また、正確に収まる要素の分布 (最小の 7 つ、その他すべての 4 つ) を計算しました。

しかし、石積みがきちんと収まることはまれで、底に1つ潜んでいることもあれば、いくつかが間違って配置されていることもあります. 1 つのビューで、どの項目を移動する必要があるかを常に確認できるようになっています。

要素を移動する際に石積みをより積極的にする方法はありますか? または、空きスペースがないことを確認するために 2 回以上行ったことがありますか?

4

2 に答える 2

7

おそらく、ここで石工の「兄貴分」アイソトープを見るべきです。特定の順序で並べ替えられているか、特定の順序で固定されている要素があり、それらが単一の列幅よりも広い場合、ブラウザーの幅が狭いと列が「ブロック」される可能性があることに注意してください。

ここに画像の説明を入力

編集多分このフィドルはそれをもう少しよく説明しています。それを見て、div の数字を観察すると、次の組積造要素 (赤い要素 5) は、要素 4 の後に来る必要があるため、白い正方形に収まらない可能性があることがわかります。つまり、最終的には 3 行しか適合しないため、空白のギャップが生じます。おそらく、Isotope の shuffle や reLayout メソッドを使用して、要素を厳密な順序で並べることを犠牲にすることができますか? あなたの問題のjsfiddleが最善です。

<article>
  <div class="tile blue"><p>1</p></div>
  <div class="tile black"><p>2</p></div>
  <div class="tile tall yellow"><p>3</p></div>
  <div class="tile grey"><p>4</p></div>
  <div class="tile wide red"><p>5</p></div>
  <div class="tile green"><p>6</p></div>
  <div class="tile grey"><p>7</p></div>
  <div class="tile blue"><p>8</p></div>
  <div class="tile green"><p>9</p></div>
</article>

$('article').isotope({
    itemSelector : '.tile',
    masonry: {
        columnWidth: 100
    }
});

article .tile {
    display: block;
    float: left;
    box-sizing: border-box;

    width: 100px;
    height: 100px;

    font-size: 3em;
    font-weight: 700;

    padding: 0 6px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    border:1px dotted black;
}

article .tile.wide {
    width: 200px;
}

article .tile.tall {
    height: 200px;
}

.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
于 2012-07-28T12:50:22.513 に答える