1. 首页
  2. 问答
  3. 砌体为了

砌体为了

2017-06-16 77 views
1

我正在做一个博客文章的列表，我想在砌体做。我已经发现的问题是：砌体为了

  1. 顺序当我加载柱在列，以便顺序有如下：

    而我想：

  2. 如果我解决了第二个问题，它会在行之间产生空白。

接下来我将展示的图像我的问题：

enter image description here

所以我想以后砌体图像像的解决方案。我添加的代码在此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); 
}

来源

2017-06-16 albert

回答

0

您可以尝试使用列数（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%; 
}

这里是捣鼓它： - https://jsfiddle.net/ug5oy087/

来源

2017-06-16 09:15:34

+0

我需要后的顺序是行不在列就像我在问题中提出的数字一样 – albert

相关问题

 相关问题