用css扰乱的砖石排序顺序

Question

我用css渲染了布局类似布局的项目。但是，项目的排序顺序受到干扰。下面是每个项目都有数字的图像。应根据行中的数字而不是列来对它们进行排序。我也试过flex也扭曲了布局。所以，我想用flex进行。这是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 column-count函数逐行排序。当浏览器正确支持CSS3网格布局时，可以使用解决方案，但我们目前只使用了javascript。

{{1}}

Responsive Masonry in CSS only