javascript - CSSを使用した動的フロートレイアウト

Question

私が達成したいことを説明してみましょう。特定の幅（250ピクセル）を設定し、動的な高さをボディに配置するXボックスが必要です。しかし、私はそれらをできるだけコンパクトにし、それらの間に不要な空きスペースがないようにしたいです。

これで、すべてのボックスの幅と高さが同じであれば、これは簡単です。たとえば、私はfloat:left;それらを着ることができます。しかし、ボックスの高さが動的で、すべてのボックスの高さがランダムである場合、ボックス間にスペースができてしまいます。

2つの例を示しましょう。

これが私が欲しいものです：

これが私が最終的に得たものです：

これは私のCSSです：

<style type="text/css">
<!--
body {
    background:#CCCCCC;
}
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.clear {
    clear:both;
}
-->
</style>

ボックスのHTML例：

<div class="flowBox">
   <h1>Header 0</h1>
   Erat volutpat. Sed rutr...
</div>

完全なソースコード：http： //pastebin.com/UL1Nqyvm

CSSでこれを実現する方法はありますか？ヘルプや指示をありがとう！

Answer 1

私が以前に見たものから、CSSだけでは不可能ではないにしても、あなたが達成したいことはほとんど不可能です。基本的に、Pinterestに似たレイアウトが必要です。私が何について話しているのかわからない場合は、PinterestのWebサイトで参照を確認できます。

ここから、Pinterestのレイアウトがどのように行われたか、および代替手段（CSSフレームワーク、jQueryプラグインなど）があるかどうかについてもう少し詳しく調べることができます。

上記を念頭に置いて、短い検索で見つけたもの：

• WookmarkjQueryプラグイン
• 組積造jQueryプラグイン

さらに、Pinterestレイアウトのコードを書いたEvanSharpによる簡単な説明は次のとおりです。

Pinterestのスクリプトを書きました。それがどのように機能するかの基本は次のとおりです。

事前に：ピンコンテナを絶対に配置します柱の幅を決定します柱の間のマージンを決定します（側溝）

配列を設定します。親コンテナの幅を取得します。適合する列の数を計算します。長さが列の数と等しい空の配列を作成します。この配列を使用して、レイアウトを作成するときに各列の高さを格納します。たとえば、列1の高さはarray[0]として格納されます。

各ピンをループする：追加された瞬間に各ピンを最短の列に配置します "left：" ===列番号（インデックス配列）に列幅+マージンを掛けたもの "top："===配列の値（高さ）その時点で最も短い列の場合最後に、ピンの高さを列の高さ（配列値）に追加します

結果は軽量です。Chromeでは、50本以上のピンのページ全体をレイアウトするのに<10ms>かかります

ここから、私が提供したわずかなガイダンスを使用してトピックをさらに調査するか、コーディングに興味がある場合は、上記の説明を独自に実装することもできます。

jQueryプラグインを使用する方がはるかに簡単ですが、それらがあなたのケースに適している場合は、それはあなただけが決めることです。

Answer 2

純粋なCSSではこれを達成できませんでした。このJSを使用する必要がありますhttp://masonry.desandro.com/

Answer 3

よくわかりませんが、「flexbox-layout」 http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/でそのようなものを入手できると思います。

問題は、それがまったく新しいものであり、より広範なサポートが必要になる可能性があることです。

Answer 4

http://masonry.desandro.com/を試しましたか?? jQueryに基づいています

Answer 5

少なくとも私が知っていることから、これは不可能です。CSSの配置は、左から右へ、次に上から下へと機能します。したがって、左（または右）にフロートすることはできますが、上にフロートすることはできません。

したがって、おそらく最も簡単なのはスクリプトですが、複雑であってはなりません。

1. 構造は、それぞれ幅250ピクセル、適切な数のdivブロックで構成されている必要があります。次に、window.resizeハンドラーで作成します。

   $(window).resize(function() 
   {
       // ... 
   }
   

2. 元のHTMLは、すべてのブロックを最初の垂直ブロックに配置できます。次に、同じサイズ変更ハンドラーで、ブロックを取得して最初のブロックから次のブロックに移動できます。これは本質的に2ライナーであり、要素をループし、次のようなことを行います。

   $("#FlowBox" + i)
       .appendTo("#VerticalBlock" + (i % number_of_vertical_blocks) );
   

CSSは次のようなものです。

.verticalBlock {
    background:#CCCCCC;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.flowBox {
    background:#CCCCCC;
    padding-top:10px;
}

Answer 6

素晴らしい質問です！私はこれをさまざまな成功で数回試しましたが、cssだけでは不可能です。私があなたに与えることができる唯一のヒントは、それはパッケージングの問題であり、そのためのjQueryスクリプトがあります！

Answer 7

これを試してみてください、それはあなたを助けるかもしれません

HTML

<div class="left"> 
    <div class="flowBox">
            <h1>Header 0</h1>
             erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 4</h1>
        am, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 1</h1>
            es vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 5</h1>
        s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 2</h1>
            illa at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 6</h1>
        eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="left">
    <div class="flowBox">
            <h1>Header 3</h1>
            ngilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
    <div class="flowBox">
        <h1>Header 7</h1>
         dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
    </div>
</div>
<div class="clear"></div>   

CSS

body {
        background:#CCCCCC;
}
.flowBox {
        background:#FFFFFF;
        margin-bottom:10px;      
        padding:10px;
        width:250px;
        border:#999999 1px solid;
}
.left { float:left;  margin:10px;}
.clear {
        clear:both;
}

などなど...これであなたはそれをするかもしれませんが、それは正しい方法ではありません。または、これにはJavascriptを使用する必要があります。以前、他の人があなたにすでにリンクを与えました

Answer 8

あなたはCSS3でこれを行うことができます：

body {
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
height: 800px; //breaks the column into new ones
}

ただし、現在、Firefox、Safari、およびchrome（新しいバージョン）でのみサポートされています。

そして、それはあなたが作った順序ではなく、0-> 1->2->3を横切るのではなく最初の列に入れます。

CSSセレクターを使用すると、2行目と3行目のdivを変更したり、新しい位置を設定したりできますが、上記のdivの位置を特定することはできないため、変更することはできません。 javascriptを使用しない限り、適切な場所に移動してください。

この例を考えてみましょう。

body>div.flowBox:nth-of-type(5n) {
    /* alter position of every 5th flowBox */
    position: relative;
    top: -200px; /* how can you tell how much? */
}
body>div.flowBox:nth-of-type(6n) {
    /* alter position of every 6th flowBox */
}
/* and so on */
...

位置を設定することはできますが、別の要素のプロパティを取得する方法がないため、どこに設定するかがわかりません。そのためには、javascriptを使用する必要があります。

Answer 9

body {
          background:#CCCCCC;
     }

.outer-div{
           width:800px;
         }

あなたのinnverdiv

.flowBox {
           background:#FFFFFF;
           margin-bottom:10px;      
           padding:10px;
           width:250px;
           border:#999999 1px solid;
          }


.left  { float:left;  margin:10px;}
.clear { clear:both;}

htmlコード：

<div class="outer-div">
<div class="left flowBox">
    <h1>Header 1</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
<div class="left flowBox">
    <h1>Header 2</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 3</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 4</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 5</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 6</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 7</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
  <div class="left flowBox">
    <h1>Header 8</h1>
    s eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
</div>
</div>

これを試してみてください、それはあなたを助けます！