javascript - 如何制作这样的砌体网格？

Question

我的元素有制作 4 列的 Macy.js，但我想在流程中制作一个右浮动的 div。我使用 mysql 查询来输出博客文章。

现在我有这样的代码:

<parent container>
  <div float right></div>
  <macy container>
<? SELECT * FROM table ORDER BY id DESC ?>
<? while ... { ?>
    <post>
<? } ?>
  </macy container>
</parent container>

我怎样才能使用 js、css、php 或其他任何东西实现它，如下图所示？

Answer 1

我的想法有点棘手。类似的东西:

<?php
     $count = 0;
     while (...) {
         $count++; ?>
         <post>
     <?php 
         if ($count == 3) { ?>
         <that right floating div>
     <?php 
         }
     }
?>

一般的想法是在第三个帖子之后添加那个 div 作为一些额外的帖子(所以它将显示在第四列)。如果你想在较小的屏幕上使用不同的列数，你可以添加其他带有类的 div 以显示/隐藏其他结果，只需添加一个或多个“如果”例如:

if ($count == 2) { ?>
    <that right floating div show only on tablet>
<?php }