防止 CSS3 列在内容更改时重排

Question

我创建了一个模板页面，它使用 CSS3 column 属性在两个整洁的列中显示 WordPress 查询结果。结果非常流畅，除非我使用（类似的）JavaScript 动态更改列的内容。

在我的例子中，显示的每个 WordPress 结果都是一个 <ul> 元素，其 <li> 子元素最初是隐藏的。当子元素未隐藏时，列有时会重排以保持相同的对称性。从美学的角度来看，它很棒，但从功能的角度来看，它会跳动我的内容，这不是我的意图。

有什么方法可以轻松地防止column 在最初建立后回流？我宁愿继续使用这种技术，而不是使用另一种方法来建立列。

我目前只使用简单的标记和 CSS：

<div class="results-list">
  <!-- PHP/WP Query Stuff in here -->
  <ul class="fa fa-plus"> <!-- The query expand button -->
    <li class="hide-me"> A hidden query result</li>
    <li class="hide-me"> Another hidden result</li>
  </ul>
</div>

.results-list {
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
}

.hide-me {
  display: none;
}

图片前：

在一个项目展开后，请注意右列的顶行如何回流到左列的底部：

我宁愿它简单地向下推右列。也许使用column 是不可能的，但我想我会问！

Answer 1

以下似乎对我有用；基本上在列正常布局之后，添加一些额外的样式来固定每列的顶部：

jQuery(document).ready(function(){
    var last = 0;
    jQuery('.results-list ul').each(function(){
        if (jQuery(this).offset()['top'] <= last) {
            // start of new column
            jQuery(this).css({
                'column-break-before': 'always',
                'break-before': 'column'
            });
        }
        last = jQuery(this).offset()['top'];
    });
});

如果上述工作正常，则只有 Office Supplies & Printing 容器应该获得额外的 CSS，然后当任何后续内容发生更改时，这将防止它被重排回第一列。

---

注意：如果仅通过 CSS 手动设置分栏符，我会使用以下内容：

-webkit-column-break-before: always;
break-before: column;

但是 jQuery 1.8 says it will apply the vendor prefixes，然而 column-break-before 似乎并没有在 Chrome 中得到应用，尽管它仍然可以按我的预期工作。