Question

我用Flexbox创建了一个砌体网格。项目的顺序是垂直的，因此我创建了一个水平排序项目的功能：

之前：

1 4 7
2 5 8
3 6 9

之后（用我的功能）：

1 2 3
4 5 6
7 8 9

对项目进行排序的功能：

// Function to order the post items for the masonry Grid
// @param {Array} Posts
// @param {Integer} Number of columns
// @return {Array} Ordered list of posts
export const orderItems = (postItems, columns) => {
  let posts = [];
  let orderedPosts = [];

  for (let col = 0; col < columns; col++) {
    posts[col] = [];
  }

  let col = 0;
  for (let i = 0; i < postItems.length; i++) {
    if (i % columns === 0) {
      posts[col].push(postItems[i]);
    } else if (i % columns === 1) {
      posts[col + 1].push(postItems[i]);
    } else if (i % columns === 2) {
      posts[col + 2].push(postItems[i]);
    } else if (i % columns === 3) {
      posts[col + 3].push(postItems[i]);
    } else if (i % columns === 4) {
      posts[col + 4].push(postItems[i]);
    } else if (i % columns === 5) {
      posts[col + 5].push(postItems[i]);
    } else if (i % columns === 6) {
      posts[col + 6].push(postItems[i]);
    }
  }

  for (let col = 0; col < columns; col++) {
    for (let post = 0; post < posts[col].length; post++) {
      orderedPosts.push(posts[col][post]);
    }
  }

  return orderedPosts;
};

我使用的是动态数组，因为它取决于屏幕大小存在多少列。但我对我的解决方案不是很满意.. 是否有更好的方法（更好的性能）来解决我的问题（没有动态数组）？

感谢您的帮助！

Answer 1

使用array.map：

＆＃13;

var before = [
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9]
];

var after = before[0].map((e, i) => before.map(row => row[i]));

console.log(after);

＆＃13;

Answer 2

最简单的方法是使用Flexbox自己的属性order，例如当每列3个时，给元素一个内联样式：

1,4,7 order: 1
2,5,8 order: 2
3,6,9 order: 3

然后，例如在下面的示例中，您将项目order和父height设置为与您的脚本内联。

＆＃13;

.parent {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;      
}


/*  for this demo only  */
.parent {
  counter-reset: num;
}
.parent div::before {
  counter-increment: num;
  content: counter(num);
}
.parent div {
  width: 80px;
  height: 80px;
  margin: 5px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div class="parent" style="height: 270px;">
  <div style="order: 1;"></div>
  <div style="order: 2;"></div>
  <div style="order: 3;"></div>
  <div style="order: 1;"></div>
  <div style="order: 2;"></div>
  <div style="order: 3;"></div>
  <div style="order: 1;"></div>
  <div style="order: 2;"></div>
  <div style="order: 3;"></div>
</div>

＆＃13;

Javascript动态数组替代方案

2 个答案: