jquery - 响应式 div 列，其中列元素在屏幕调整大小时移动

Question

我有三列，名为 <div class="pageColumnOneThird"> 。

在每一列中，我使用 PHP 获取图像和帖子，其中最新的元素被放置在 top left column 中。以及 top middle column 中的下一个第三个是 top right column在返回到 left column 之前再次。

现在我正在尝试使其响应，以便当显示两列时，每个图像/帖子的位置都会更改。

示例:当只有两列并排时，我需要第一行元素为元素 1 和 2。然后第二行必须为元素 3 和 4。

有没有办法使用 CSS 来做到这一点？

如果没有，是否有任何快速的 jQuery 代码可以为我做到这一点？

代码

<!-- FIRST COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 1</div>
    <div class="itemWrap">Element 4</div>
    <div class="itemWrap">Element 7</div>
</div>
<!-- SECOND COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 2</div>
    <div class="itemWrap">Element 5</div>
    <div class="itemWrap">Element 8</div>
</div>
<!-- THIRD COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 3</div>
    <div class="itemWrap">Element 6</div>
    <div class="itemWrap">Element 9</div>
</div>

这是 jsfiddle也是如此。

Answer 1

您可以简单地使用一个包装器，然后仅使用@media查询

.pageColumnOneThird {
  font-size: 0;
}
.itemWrap {
  background-color: #AEAEAE;
  margin: 2px 0;
  width: 33.3%;
  padding: 0 1px;
  height: auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px
}
@media (max-width: 768px) {
  .itemWrap {
    width: 50%
  }
}
@media (max-width: 480px) {
  .itemWrap {
    width: 100%
  }
}

<div class="pageColumnOneThird">
  <div class="itemWrap">Element 1</div>
  <div class="itemWrap">Element 2</div>
  <div class="itemWrap">Element 3</div>
  <div class="itemWrap">Element 4</div>
  <div class="itemWrap">Element 5</div>
  <div class="itemWrap">Element 6</div>
  <div class="itemWrap">Element 7</div>
  <div class="itemWrap">Element 8</div>
  <div class="itemWrap">Element 9</div>
</div>

编辑基于OP评论:

This is not what I am looking for as I need to be allowed different heights on each item element, but maintain equal margin WITHOUT adding empty space in the elements. Thats why I need to use three separate columns. Found a picture of what I need https://prod-foundation-forum.s3.amazonaws.com/uploads/part/part_image/93067/illustration.jpg

对于这种类型的布局，最适合您的是 masonry