Question

我只是试图找到一些东西来解决我在CSS中的问题但可能在jQuery中。首先看起来很简单，但很奇怪，我无法解决这个问题。有人可以给我一个提示吗？

我在JS中有一个数组：

var blocks = ["block1", "block2", "block3", "block4", "block5", "block6", "block7", "block8", "block9", "block10", "block11", "block12", "block13", "block14", "block15"];

我将以这种方式解析它：

for (var i = 0; i < blocks.length; i++) {
    var one_block = $("<div class='one_block'>" + blocks[i] + "</div>");
        $("all_blocks").append(one_block);
} 

<style>
 .one_block{
  width:20%;
  float:left;
 }
</style>

现在我在屏幕上显示了这个结果

你知道这都是div

这是HTML：

block1   block2   block3   block4   block5

block6   block7   block8   block9   block10

block11   block12   block13   block14   block15

但我需要这个

block1   block4   block7   block10   block13

block2   block5   block8   block11   block14

block3   block6   block9   block12   block15

谢谢！

Answer 1

您可以将“块”放入列中，然后使用模数%将它们按顺序放入右列。

这样的事情会起作用：

<强> CSS

 #column-1,#column-2,#column-3,#column-4,#column-5 {
  width:18%;
  float:left;
  border: 1px solid #333;
 }

<强> HTML

<div id="wrapper">
  <div id="column-1"></div>
  <div id="column-2"></div>
  <div id="column-3"></div>
  <div id="column-4"></div>
  <div id="column-5"></div>
</div>

<强>的JavaScript

var numberOfBlocks;
//get a number from the user to test how many blocks
while(isNaN(numberOfBlocks)) {
    numberOfBlocks = prompt('How many blocks do you want?')
}
//build the test array of blocks
var blocks = [];
for(var i = 1; i <= numberOfBlocks; i++) {
    blocks.push('block'+i)
 }


//determine the number of rows to use
rows = Math.ceil(blocks.length / 5);

//if the number of rows did not divide evenly, use modulus to find the number of columns that will need to be longer
numberOfLongColumns = (blocks.length % 5);

//keep track of the current column
column = 0;

//use an index, instead of i in the loop.  this allows us to reset the index if we encounter a column that has fewer elements
index = 0;

//loop over the array
for (var i = 0; i < blocks.length; i++) {

//if we've reached the end of a column...
    if(index % rows == 0) {
    //if it is the last of the longer columns...
    if(numberOfLongColumns > 0 && column == numberOfLongColumns) {
        //reset the index
      index = 0;
      //decrement the rows, so the next column is 1 element shorter
      rows--;
    }
    //move the pointer to the next column
    column++;
  }
  //increment the index
  index++;

  //add the element
  var one_block = $("<div>" + blocks[i] + "</div>");
  $("#column-"+column).append(one_block);
}

示例输出

block1 block5 block9 block13 block16
  block2 block6 block10 block14 block17
  block3 block7 block11 block15 block18
  block4 block8 block12

您可以在此处看到它：https://jsfiddle.net/igor_9000/386rwry5/2/

Answer 2

只需重新排列阵列以满足您的需求：

var blocks = ["block1", "block4", "block3", "block2", "block5", "block6", "block7", "block8", "block9", "block10", "block11", "block12", "block13", "block14", "block15"];

或者你想要订单。

Answer 3

CSS3 columns可能会成功。它与报纸专栏的工作方式类似。最好的部分是，它会根据视口重新调整大小（类似于flex-box。）See more

.all_blocks {
  /* create 5 columns with 10% of view-port width */
  -webkit-columns: 10vw 5; 
  -moz-columns: 10vw 5;
  columns: 10vw 5;
}

See Demo

浮动更多列CSS技巧

3 个答案: