Bootstrap使Div在列中彼此相邻浮动

Question

我正在尝试重现彼此相邻的div，类似于Masonry jQuery插件，但如果可能的话，使用原生的Bootstrap / CSS。

当我尝试下面的代码时，我得到如下所示的输出，右边的列似乎工作正常，但其他两个没有。我没有在最后一列中添加任何额外的代码，如何让其他代码浮动页面以删除空格？

HTML代码，由PHP生成：

$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

我在项目中遇到了同样的要求，你需要给出 position：absolute并设置每个元素的top，left，width，height 。

例如，如果你有动态项目，首先测量每个元素分配给下一个元素top，左边是绝对位置。

检查pinterest：https://in.pinterest.com/

在pinterest中，检查检查每个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>";

它按预期工作，但是当你调整大小时，它按列排序，我想这可以通过改变你在数组中存储它们的方式来修复，希望它有所帮助。