javascript - 将一个 div 的元素发送到另一个 div

Question

我有不同高度的图像，我想将它们放入平铺画廊中，如下图所示:

但是，我也希望它具有压抑性，所以我的实现方法如下:

1) 我使用 HTML 创建了三个 div，#grid1、#grid2 和 #grid3。图像放置在另一个 div 中的这 3 个网格内，该 div 具有包含图像的类 .gridElement。

<!--Grid System-->
<div id="grid1">
    <!--Grid 1-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<div id="grid2">
    <!--Grid 2-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<div id="grid3">
    <!--Grid 3-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<!--/Grid System-->

2) 这是使用媒体查询的 CSS:

/*Grid System*/
#grid1,#grid2,#grid3 {
   width: 33.333%;
   float: left;
}

   #grid1 {
      padding-right: 20px;
   }

   #grid2 {
      padding: 0 10px;
   }

   #grid3 {
      padding-left: 20px;
   }

   /*Gird Elements*/
   .gridElement {
      margin-bottom: 30px;
      overflow: hidden;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type,
   #grid3 .gridElement:last-of-type {
      margin-bottom: 0;
   }

   #grid1 img,#grid2 img,#grid3 img {
      width: 100%;
   }

和

@media screen and (max-width: 1024px) {
   /*Grid System*/
   #grid1,#grid2,#grid3 {
      width: 50%;
   }

   #grid3 {
      display: none;
   }
}

和

@media screen and (max-width: 770px) {
   /*Grid System*/
   #grid1,#grid2,#grid3 {
      width: 100%;
   }

   #grid1,#grid2,#grid3 {
      padding: 0;
      display: block;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type {
      margin-bottom: 30px;
   }

和

@media screen and (max-width: 500px) {
   /*Grid System*/
   .gridElement {
      margin-bottom: 20px;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type {
      margin-bottom: 20px;
   }

他们的理论:当屏幕尺寸超过 1024px 时，默认显示三个网格。但是，当使用 CSS #grid3 的屏幕尺寸低于 1024px 和高于 770px 时，隐藏并使用 JavaScript 我试图平等地发送 #grid3 内的所有 .girdElements到#grid1 和#grid2。当屏幕尺寸低于 770px 时，一切都会恢复正常，所有的网格都会显示出来。

问题是什么？我已经设法让除 JavaScript 以外的所有东西都能正常工作——请有人能帮我创建一个函数，当屏幕尺寸低于 1024px 和高于 770px 时，它将把 #grid3 内的所有 .girdElements 平等地发送到 #grid1 和 #grid2 吗？ “加载和调整大小”。

Answer 1

您可以使用 masonry达到类似的效果。它使用绝对定位而不是固定数量的列。无论如何，它看起来都一样并且适应屏幕宽度。