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

Question

我正在尝试复制类似于Masonry jQuery插件的，彼此相邻漂浮的div，但如果可能的话，使用本机Bootstrap / CSS。

当我尝试下面的代码时，我得到如下所示的输出，右侧的列似乎工作正常，而其他两个则不行。 我没有在最后一栏中添加任何额外的代码，如何使其他人浮出页面来删除空间？

从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

我在项目中达到了相同的要求，您需要给出位置：绝对，并设置每个元素的顶部，左侧，宽度，高度 。

例如，如果您有动态项目，则首先测量分配给下一个元素top，left的每个元素的绝对位置。

签入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>";

它可以按预期工作，但是当您调整大小时，按列对它们进行排序，我想可以通过更改将它们存储在数组中的方式来解决，希望对您有所帮助。