砌筑井然有序

Question

我正在为一个博客做一个帖子列表，我想在 Masonry 中做。我发现的问题是：

我加载帖子时的顺序是按列排列的，所以顺序如下：

1 3 5

2 4 6

我想要：

1 2 3

4 5 6
如果我解决了第二个问题，它会在行之间生成白色 space。

接下来我展示一张关于我的问题的图片：

所以我想要一个类似于 After Masonry 图像的解决方案。我已经在 fiddler

中添加了代码

HTML是：

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

和 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

您可以尝试使用列数 (CSS 属性) 创建砌体。下面是一个可以帮助你的例子。

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

这是它的 fiddle：- https://jsfiddle.net/ug5oy087/

砌筑井然有序

Masonry in order

html

css

masonry