列数并在行中添加新项目

Question

我使用列数来显示多列中不同大小的框。问题是，当我动态生成新项目时，它会向列添加项目。我想向行添加更多项目，以便用户无需向上滚动以查看添加的新内容。这是小提琴：https://jsfiddle.net/o2gxgz9r/4231/

<div class="masonry">
  <div class="item">some multi-size text</div>  
  <div class="item">some multi-size text</div>  
...
</div>

CSS

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    padding: 20px;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

我不想使用javascript，支持的浏览器是IE Edge和最新的chrome / FF。