在更多列中向左浮动CSS技巧

Question

I just tried to find something to resolve my problem in CSS but may be in jQuery. On first look is very simple but strange I cant resolve this. Could someone to give me a hint?

I have an array in JS:

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

I will parse it in this way:

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>

Now I have this result on my screen

Such you understand this are all divs

And this is HTML:

block1   block2   block3   block4   block5

block6   block7   block8   block9   block10

block11   block12   block13   block14   block15

But I need to have this

block1   block4   block7   block10   block13

block2   block5   block8   block11   block14

block3   block6   block9   block12   block15

Thanks!

Answer 1

You can put the "blocks" into a columns, and use the modulus % to drop them into the right column in order.

Something like this would work:

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

Example Output

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

You can see it working here: https://jsfiddle.net/igor_9000/386rwry5/2/

Answer 2

Just rearrange the array to suit your needs:

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

Or however you want the order.

Answer 3

CSS3 columns might do the trick. It works similar to how newspaper columns work. Best part is, it will re-size according to view-port (similar to 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