Question

我有不同高度的图像，我想将它们放入平铺的图库中，就像下图所示：

enter image description here

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

1）使用HTML我创建了三个div，#grid1，#grid2和#grid3。并且图像被放置在另一个包含图像的.gridElement类的花药div中的3个网格中。

<!--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时，默认会显示三个网格。但是当屏幕大小低于1024px且高于770px时，使用CSS #grid3隐藏并使用JavaScript我试图将＃grid3内的所有.girdElements同等地发送到＃grid1和＃grid2。当屏幕尺寸低于770px时，每次都会恢复正常，并显示所有网格。

问题？我已经设法让一切工作但JavaScript - 请任何人都可以帮助我创建一个函数，当屏幕大小低于1024px和高于770px时，将＃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，则可以应用以下算法：

获取grid3中的项目，按字段排序。您之前指定的数据值等标准。
对于每个项目：

一个。计算grid1的宽度并将其与grid2的网格进行比较。湾如果grid2较高，请将该项追加到grid1。否则将其附加到grid2。
列grid3将被隐藏。

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

要返回3-col布局，只需将带有grid3标记的项目放回grid3中，按时间顺序排序。

（该死的，仍然在贬低降价。如果编辑可以帮助我......请

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

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

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

3 个答案: