これは説明が難しいかもしれません。事前定義されたグリッド内のスペースを検出し、このスペースに収まる要素を移動および配置できる jQuery masonry のような同様のプラグインはありますか?
私の質問を説明する他のすべての方法は複雑になるので、私が何を意味するかを示すために簡単な画像を描きました.
注意: これは流動的なレスポンシブ Web デザインです。
したがって、私のdom-orderは1,2,3です。ただし、特定の範囲内でレイアウトを折りたたむときmedia-queryは、dom の順序を動的に切り替えたり、要素を別の場所に配置したりしたいと考えています。あなたが私のサンプルで見るように。
jQuery MasonryやjQuery Isotopeのようなものがあることは知っていますが、これらのプラグインはどちらもグリッドのすべての空きスペースを埋めるわけではありません。たとえば、この同位体のスクリーンショットをチェックしてください…</p>
要素が 1 つ欠けています。もちろん、ほとんどの場合、これは要素の順序を維持したいものです。私の場合、順序は気にしません。すべてのスペースとギャップを埋めたいだけです。上の私のスケッチとまったく同じようitem-nr-3に、空のギャップに合わせて上に移動する必要があります（収まるからです）。そして、同じサイズがもう一つあればitem、下の隙間に収まりますitem-nr-3。
それはどういうわけか可能ですか？それを行うjQueryプラグインはありますか？それとも他にイデがありますか？
いくつかの追加情報:items私が話している と ボックスはすべて に設定されてbox-sizing:border-boxいるので、パディングやマージンについて心配する必要はありません。
更新: これは問題のライブ サンプルです: http://jsfiddle.net/r79u2/1/