0

我知道这可能是一个常见问题，但我没有找到答案。

我需要为包含未知数量的可变大小元素的网格构建一个 3 列响应式布局。它们的大小在网格中被限制为最大 3x3。

我的问题是我需要能够堆叠 1 行项目，但是我尝试的每个插件最终都会在列之前填充我的行。

例如，这是一个使用gridstack.js的解决方案：

<div class="grid-stack grid-stack-3">
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">2</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">3</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">4</div>
  </div>
</div>

var options = {
  cell_height: 267,
  vertical_margin: 26,
  width: 3
};
$('.grid-stack').gridstack(options);

正如您在图像中看到的，绿色元素没有按应有的方式堆叠。

在此处输入图像描述

要将它们堆叠起来，我需要交换 div 3 和 4，从而实现这一点（这是预期的布局）。

在此处输入图像描述

不幸的是，这些项目是从外部服务接收的，所以我无法控制它们的顺序（这毫无意义，因为我不知道预期的布局是什么）。

我对Isotope的模式有点运气，这意味着它修复了图片中的示例，但是添加第五个元素会创建第四列，我被迫只有其中的 3 个，所以我不能真正使用它.fitColumn

这是我需要实现的测试布局的 HTML（这是我被要求做的一个示例）：

<div class="grid-stack grid-stack-3">
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">2</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">4</div>
  </div>
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">3</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="2" data-gs-height="3" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: blue;">5</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: red;">6</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">7</div>
  </div>  
  <div class="grid-stack-item" data-gs-width="2" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: yellow;">8</div>
  </div> 
  <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1">
    <div class="grid-stack-item-content" style="background: green;">9</div>
  </div> 
</div>

是否有人对允许我构建这样的布局的 javascript 解决方案有任何想法（也需要支持单列模式！）？我的选项不多了，我想避免为此任务编写自定义解决方案，因为我对 javascript 没有那么丰富的经验。

4

1 回答 1

0

查看 CSS grid layout，因为它已在大多数浏览器中得到很好的支持。Grid by Example网站和视频播放列表会有所帮助。CSS-Tricks 也有一篇不错的文章。

于 2017-10-25T18:34:25.963 回答