ブートストラップDivs Floatを列の隣に配置

Question

Masonry jQueryプラグインと似ていますが、可能であればネイティブのBootstrap/CSSを使って、divsを隣り合わせに再現しようとしています。

次のコードを試してみましたが、右の列は正常に動作しているようですが、他の2つは表示されません。私は最後の列に余分なコードを追加していない、どうすれば他のスペースを削除するページを浮かせることができますか？

PHPから生成されたHTMLコード、：左上、幅、高さを絶対と設定：私は、あなたが位置を与える必要が私のプロジェクトで同じ要件を満たし

$output .= "<div class='container-fluid'>"; 
$output .= "<div class='row' class='article-index-areas'>"; 

while ($stmt -> fetch()) // Prints out the white boxes 
{   
    $output .= " 
    <div class='col-sm-6 col-md-4'> 
     <div class='thumbnail' style='height:" . rand(100,300) . "px;'> 

     </div> 
    </div> 
    "; 
} 

$output .= "</div>"; 
$output .= "</div>"; 

Answer 1

各要素の

たとえば、ダイナミックプロジェクトがある場合は、最初に、次の要素の上に割り当てられた各要素を測定し、絶対的な位置に置きます。 Pinterestの中

チェックイン：Pinterestのでhttps://in.pinterest.com/

は、CSSプロパティ、その本当に面白いの各項目を検査チェック。

Answer 2

ビットのためにそれで遊んで後、私は列に出力をバッファリングすることにより、ネイティブな方法を見つけました：

$output = array('', '', ''); // Store in 3 columns 
$count = 0; 

while ($stmt -> fetch()) 
{   
    $output[$count] .= " 
    <div class='thumbnail' style='height:" . rand(100,300) . "px;'> 

    </div> 
    "; 

    $count++; 

    if($count == 3) 
    $count = 0; 
} 

$real_output = ''; 
$real_output .= "<div class='row'>"; // Add 1 row for them all 

foreach ($output as $o) 
{ 
    $real_output .= "<div class='col-sm-6 col-md-4'>"; // Add 3 columns 
    $real_output .= $o; // Put the data from the array into each column 
    $real_output .= "</div>"; 
} 

$real_output .= "</div>"; 

意図したとおりにそれは動作しますが、あなたはそれが列でそれらを注文サイズを変更するとき、私はそれは可能性が推測配列に格納する方法を変更することで修正されました。