I have blocks of them: enter image description here

I would like to make a similarity: enter image description here

Is there any way to do this? I use Bootstrap .

  • You need this script. The link is the file itself, examples, etc. - http://masonry.desandro.com/ - Alexey Giryayev
  • Probably, at first it is better to deal with the flexbox, which underlies the work of masonry. An example of a pinterest is here - Mr. Brightside
  • @ Mr.Brightside, where did you see that it is the basis of the work? In my opinion, all elements of masonry use absolute positioning relative to the container, which is indicated in the initialization and configuration of the script. The calculation is based on the offsets of positions on the page and a grid is constructed based on this data. The script has a lot of logic, not a simple flexbox. - VostokSisters

3 answers 3

You will probably have to use padding instead of margin because of a problem with # 7, but something like this:

div { margin: 0 0 1em; background: silver; counter-increment: i; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside: avoid; break-inside: avoid-column; } body { -moz-column-count: 4; column-count: 4; counter-reset: i 0; } div:before { content: "#" counter(i) " - " attr(style); } 
 <div style="height:10em"></div> <div style="height:1em"></div> <div style="height:4em"></div> <div style="height:16em"></div> <div style="height:2em"></div> <div style="height:5em"></div> <div style="height:7em"></div> <div style="height:12em"></div> <div style="height:11em"></div> <div style="height:3em"></div>

  • Page-break-inside is the same for print, for what in that case? - user33274
  • @Geyan, for those who do not support break-inside page-break-inside works page-break-inside . - Qwertiy ♦

There is another option with the script:

 $(function() { $('.flexboxes').masonry({ itemSelector: 'div' // обращаемся к пунктам }); }); 
 .flexboxes { display: flex; } .flexboxes > div { width: 100px; margin: 5px; background: silver; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> <div class="flexboxes"> <div style="height:10em">0</div> <div style="height:1em">1</div> <div style="height:4em">2</div> <div style="height:16em">3</div> <div style="height:2em">4</div> <div style="height:5em">5</div> <div style="height:7em">6</div> <div style="height:12em">7</div> <div style="height:11em">8</div> <div style="height:3em">9</div> </div>

  • Something like ... - VostokSisters

1) Each column will be a separate loop; 2) Use absolute positioning, for example, as on Pinterest is done.

  • one
    Will the column be a loop? What? - Qwertiy ♦