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

Question

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

但是，我也希望它具有压制性，所以我的方法如下：

1) 我使用 HTML 创建了三个 div，#grid1、#grid2 和 #grid3。并且图像被放置在这 3 个网格中的花药 div 中，该 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 以上时，默认显示三个网格。但是，当屏幕尺寸低于 1024 像素和高于 770 像素时，使用 CSS #grid3 被隐藏并使用 JavaScript 我试图将 #grid3 内的所有 .girdElements 发送到 #grid1 和 #grid2。当屏幕尺寸低于 770px 时，一切都会恢复正常并显示所有网格。

问题？我已经设法让 JavaScript 之外的所有东西都正常工作 - 请任何人都可以帮助我创建一个函数，当屏幕尺寸低于 1024 像素并高于 770 像素时，该函数将 #grid3 内的所有 .girdElements 平等地发送到 #grid1 和 #grid2 吗？ “加载和调整大小”。

Answer 1

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

Answer 2

你可以试试这样的：

    var toggle = true;
    $('#grid3').children('.gridElement').each(function (index) {
        if (toggle) {
            $('#grid1').append($(this));
            toggle = false;
        } else {
            $('#grid2').append($(this));
            toggle = true;
        }

Here 是 JSFiddle 上的一个工作示例，排序

网格内的元素

Answer 3

这个解决方案使用 jQuery 更好，但是有一些方法可以计算元素的实际高度。

首先，您应该将 grid1、grid2、grid3 中的每个项目标记为属于它们对应的网格，例如通过使用类或数据。然后是一种“年表”值，用于存储每个项目的“顺序”。

如果您希望将 grid3 中的所有项目附加到 grid1 和 grid2，您可以应用以下算法：

1. 获取grid3中的项目，按字段排序。您之前指定的数据值等条件。

2. 对于每个项目：

   一个。计算 grid1 的宽度并将其与 grid2 的网格进行比较。 湾。如果 grid2 更高，则将该项目附加到 grid1。否则将其附加到 grid2。

3. 列 grid3 将被隐藏。

推荐的方法是使用 jQuery 计算 grid1 和 grid2 的 .height()，并移动元素。

要回到 3-col 布局，只需将带有 grid3 标记的项目按年表值排序并放回 grid3 中。

（该死，还在弄乱markdown。如果编辑可以帮助我，请...）

试试这个示例代码（不包括关于排序标准的事实 - 不保证完美无瑕 - 这只是为了说明这个想法）：

var grid1 = $("#grid1");
var grid2 = $("#grid2");
var grid3 = $("#grid3");

//compressing - distributing grid3 between grid1 and grid2
function compress()
{
    grid3.hide();
    $(".item-in-grid3").each(function(i, e){
        //never assign "width:" to any grid (1, 2, 3) in css, so it can
        //be dynamic and compute height and compare them on each iteration.
        if (grid1.height() > grid2.height())
         {
            $(this).appendTo(grid2);
        }
        else
        {
            $(this).appendTo(grid1);
        }
    });
}
//return back the elements to grid3
function decompress()
{
    $(".item-in-grid3").each(function(i, e){
        $(this).appendTo(grid3);
    });
    grid3.show();
}