Masonry in order

Question

I'm doing a list of posts for a blog and I want to do in Masonry. The problems I have found are:

1. 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

2. 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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </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/