jquery - div のサイズを段階的に変更することは可能ですか?

Question

浮動要素を含む中央の div があり、各要素は同じ高さと幅を持ち、浮動しています。div のサイズが変更されると、常に右側にギャップがあり、別の要素を収めるのに十分なスペースがありません。私が望むのは、そこにスペースがあるだけではなく、別の要素に収まる場合にのみ div が拡張されることです。それは可能ですか？

Answer 1

CSS3 ソリューション

いくつかの@mediaクエリ呼び出しを使用すると (そのため、必要なサイズには実質的な制限があります)、CSS3 ブラウザーで良好な結果が得られます。この（例として）コードを使用するこのフィドル（フルスクリーン）を参照してください。

HTML

<ul class="container">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul> 

CSS

@media screen and (min-width: 122px) {
  .container {width: 120px;}
}

@media screen and (min-width: 242px) {
  .container {width: 240px;}
}

@media screen and (min-width: 362px) {
  .container {width: 360px;}
}

@media screen and (min-width: 482px) {
  .container {width: 480px;}
}

@media screen and (min-width: 602px) { 
  .container {width: 600px;}
}

/* you need to decide just how far to take it */

.container {
    margin: 10px auto;
    overflow: hidden;
    border: 1px solid red;
    height: 210px;
}

li {
    width: 100px;
    height: 50px;
    background: cyan;
    float: left;
    margin: 10px;
}

また、あなたや他のユーザーがこれを参考にできる可能性もあります。

Answer 2

Masonryに似た機能を探しているようです。これは、Pinterest が使用する Pinterest (プラグインではないにしても) と同じ構造です。

変な形の要素に限ったことではないと思うので、うまくいくはずです。