Masonry in order [duplicate] - html

Question

This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
I'm doing a list of posts for a blog and I want to do in Masonry. The problems I have found are:
The order when I load the posts is in columns so the order is like next:
1 3 5
2 4 6
And I want:
1 2 3
4 5 6
If I solve the second problem, it makes white space between rows.
Next I show an image about my problem:
So I want a solution like the after Masonry image. I have added the code in this fiddler
The HTML is:
<ul id="posts">
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 1</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title 2</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> Lorem <br> Ipsum</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title ramdom <br> lore</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title for test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> test</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title <br> a <br> five</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
<div class="bloglist text-center">
<div class="overflow"></div>
<div class="post-content">
<div class="listHeader">
<h1>Title</h1>
</div>
<div class="sbMeta">
<div class="loader"></div>
<div class="sbCats">Category</div>
<div class="sbAuth">
Author
</div>
</div>
<div class="sbFooter">
<i class="esen-Calendar"></i>Date
<i class="esen-Clock"></i>Min read
</div>
</div>
</div>
</li>
</ul>
and the CSS:
#posts li {
display: inline-block;
margin: 0;
padding: 0;
width: 33%;
background: #efefef;
}
#posts li .bloglist {
width: 100%;
position: relative;
border: 1px solid #f1f1f1;
padding-bottom: 22px;
overflow: hidden;
}
.text-center {
text-align: center;
}
#posts li .bloglist .overflow {
z-index: 2;
}
.overflow {
background-color: #3994ce;
mix-blend-mode: multiply;
opacity: .8;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
}
#posts li .bloglist .post-content {
position: relative;
z-index: 3;
}
#posts li .bloglist .post-content .listHeader {
position: relative;
margin-bottom: 20px;
}
#posts li .bloglist .post-content .sbMeta {
position: relative;
width: 100%;
}
#posts li .bloglist .post-content .sbMeta .loader {
height: 1px;
width: 100px;
margin: 0 auto;
margin-bottom: 20px;
position: relative;
background: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
#posts li .bloglist .post-content .sbAuth {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
#posts li .bloglist .post-content .sbAuth a {
color: #fff;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#posts li .bloglist .post-content .sbFooter {
width: 90%;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}

Answer 1

You can try creating masonry using column counts (CSS property).
Below is an example that can help you out.
HTML:
<ul id="posts">
<li>col 1</li>
<li>col 2</li>
<li>col 3</li>
<li>col 4</li>
<li>col 5</li>
<li>col 6</li>
</ul>
CSS:
#posts { /* Masonry container */
column-count: 3;
column-gap: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-ms-column-gap: 1em;
}
#posts li { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
Here is the fiddle for it:-
https://jsfiddle.net/ug5oy087/