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

我有不同高度的图片，我想把它们放在一个平铺的画廊里，就像下图所示：

然而，我也希望它是压制性的，因此我的工作方法如下：

1） 我使用HTML创建了三个div，

#grid1

，

#grid2

和

#grid3

。图像被放置在另一个div中的这3个网格中，该div具有包含图像的class

.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-->

及

及

及

他们的理论是：当屏幕大小大于1024px时，默认情况下会显示三个网格。但是，当屏幕大小低于1024px且高于770px时，使用CSS

#grid3

将被隐藏，并使用JavaScript，我尝试将#grid3中的所有

.girdelement

发送到#grid1和#grid2。当屏幕尺寸低于770px时，所有内容将恢复正常，并显示所有网格

---

问题出在哪里？除了JavaScript，我已经设法让所有东西都正常工作了——请任何人帮我创建一个函数，当屏幕大小低于1024px且高于770px时，将#grid3中的所有.girdelement平均发送到#grid1和#grid2？“加载和调整大小”。

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

您可以尝试以下方法：

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

---

是JSFiddle上的一个工作示例，对网格中的元素进行排序使用jQuery这个解决方案更好，但是有一些方法可以计算元素的实际高度

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

如果要将grid3中的所有项追加到grid1和grid2，可以应用以下算法：

获取grid3中的项目，按字段排序。数据值等。您以前指定的标准

对于每个项目：

a。计算grid1的宽度并将其与grid2的网格进行比较。 B如果grid2较高，请将该项附加到grid1。否则，将其附加到grid2

grid3列将被隐藏

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

要返回到3列布局，只需将带有grid3标记的项目放回grid3，按时间顺序值排序即可

（该死，还在搞减价。如果编辑能帮我的话，请…）

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

---

为什么要重新发明轮子？使用像Modernizer这样的库。我不想使用插件，我想要一些非常简单的东西+我就快到了！我在这上面花了很多时间，但真的需要一些帮助才能让它工作！请说明这几乎奏效了，但它只将grid3的所有元素发送到grid2，而没有发送到grid1。有什么想法吗？好的！我已经对我的答案进行了修改，并提供了一个有效的JSFIDLE，祝您愉快！非常感谢。我一直试图让它在屏幕大小上自动工作，而不是在按钮切换上，所以我尝试实现if（width<1024&&width>770）{}，但我所有的尝试都失败了！你能给我一些建议吗？看看（）。这个0.8kb的小库将允许您使用Javascript进行css媒体查询。如果网格工作正常，请接受答案。好的，Loai，我帮了你一个忙，更新了JSfiddle（）-调整大小的代码在JSfiddle框架中不起作用，但我在本地机器上的Chrome和Firefox中试过，效果很好。这应该足够让你开始了。我不能使用插件。我们如何把它付诸实践呢？你能踢我一下吗？

@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;
   }

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

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();
}