javascript - ボックスのモザイクの特別な「フロート」

Question

モザイクには、同じ幅と高さの行と列があります。そのセルのそれぞれは、ボックス全体またはその一部で埋める必要があります。つまり、すべてのボックスは、長さ方向に1つ以上のボックスを占有し、幅方向に1つ以上のボックスを占有する必要があります。

すべてのボックスが1行だけを占める場合、すべてが正常に機能します。ただし、ボックスを1行より大きくしようとすると、float:left希望どおりに機能しなくなります。

上に示したように、（HTMLで）大きなボックスのすぐ隣にある灰色のボックスは次の行にスキップします。赤い矢印が指す場所にボックスを移動する必要があります。私の質問は、灰色のボックスが動かないようにするにはどうすればよいですか？

私はクリーンなソリューションを好むことを考慮に入れてください。つまり、ボックスとその幅/高さはJavaScriptによって生成されるため、絶対位置または相対位置でボックスを移動することは最善のオプションではありません（ただし、回答を投稿してください）。

御時間ありがとうございます。

score 2 · Accepted Answer

クリーンなCSSコードを使用してそれを行うことはできません。

しかし、あなたはjavascriptを使うことができます、それをするいくつかのjQueryプラグインがあります、あなたはIsotopeを試すことができます

score 2 · Accepted Answer

JqueryMasonryがこれを行います。残念ながら、単純なマークアップとCSSでは目的を達成できません。

2 に答える 2