0

我们正在使用响应式设计，我们希望制作响应式列。因此，在大屏幕上，项目将存储在 2 列中，而在小屏幕上则存储在 1 列中。物品可以有不同的高度。物品应按正确的顺序放置（见下图）。

物品顺序

1. 从 1 -> 2

一栏布局：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

将其转换为两列的脚本。

$(".container > .item:odd").wrapAll('<div class="column" />');
$(".container > .item").wrapAll('<div class="column" />');

2. 从 2 -> 1

两列布局：

<div class="container">
  <div class="column">
    <div class="item">1</div>
    <div class="item">3</div>
    <div class="item">5</div>
  </div>
  <div class="column">
    <div class="item">2</div>
    <div class="item">4</div>
    <div class="item">6</div>
  </div>
</div>

编写将其转换为一列的脚本。

while($(".container .column .item").length > 0)
      {
        $(".container").append($(".container .column:eq(0) .item:first"))
        $(".container").append($(".container .column:eq(1) .item:first"))
      }
$(".container2 .column1").remove();

我们不能使用 $(".container item").unwrap() 作为第二个选项，因为它不会保存项目 order。

一切正常，但我们想知道是否有任何更容易的解决方案（特别是对于 2 选项）。我们将不胜感激任何建议或帮助。

4

0 回答 0