cssのような石積みの順序を乱した

Question

私はcssでレイアウトのような石積みのアイテムをレンダリングしました。しかし、アイテムのソート順が乱されます。以下は、各項目に数字がある画像です。それらは、列ではなく列の数値に従ってソートする必要があります。レイアウトを歪ませたフレックスも試みました。だから、私はフレックスでそれをやりたい。ここでは、CSSのコードは次のとおりです。

ul.ads-collection { 
    margin: 1em 0; 
    padding: 0; 
    -moz-column-gap: 0.5em; 
    -webkit-column-gap: 0.5em; 
    column-gap: 0.5em; 
    font-size: .85em; 
} 

ul.ads-collection li { 
    display: inline-block; 
    background: #fff; 
    padding: 0; 
    margin: 0 0 0.2em; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-shadow: 2px 2px 4px 0 #ccc; 
} 

そして、ここではhtmlです：

<ul class="ads-collection"> 
    <li> 
     <div class="ad"> 
      <img src=".." alt="No Image" class="img-responsive"> 
      <div class="col-xs-12 padding-bottom-10 padding-top-10"> 
       <h2 class="no-margins"><a href="javascript:;" class="no-margins"><strong>1 - Testing classified</strong></a></h2> 
       <span class="location font-weight-normal">Abu Dhabi</span> 
       <span class="price font-red font-weight-normal"><strong>536</strong> AED</span> 
      </div> 
     </div> 
    </li> 
    <li> 
     <div class="ad"> 
      <div class="col-xs-12 padding-bottom-10 padding-top-10"> 
       <h2 class="no-margins"><a href="javascript:;" class="no-margins"><strong>2 - Samsung Galaxy Golden i9235</strong></a></h2> 
       <span class="location font-weight-normal">Dubai</span> 
       <span class="price font-red font-weight-normal"><strong>500</strong> AED</span> 
      </div> 
     </div> 
    </li> 
</ul> 

Answer 1

CSSの列カウント機能付きラインでの並べ替えを取得することはできません。 CSS3グリッドレイアウトがブラウザで正しくサポートされるようになると解決策が実現しますが、現時点ではjavascriptしか使用していません。

// With Stylus preprocessor: 

$gutter = 1.5rem 
$sizeXS = 36.01rem 

.masonry 
    margin $gutter 0 
    column-gap $gutter 

@media (min-width $sizeXS) 
    .masonry 
    column-count 2 

// etc... 

Responsive Masonry in CSS only