如何将Masonry js与嵌套在<div>元素中的多个<ul>元素一起使用

Question

所有li项都是动态获取的，任何人都可以请教如何在此结构上砌砌Js，小提琴会更方便，我已经尝试过了，但是它并没有按预期的那样工作。宽度总是一样的，因为高度是动态变化的，因此高度会不断变化。

//HTML code
<div class="posts"> 
<ul class="ul-0">
    <li>a tag with image</li> // i have images inside this element
    <li></li> // this item's are dynamically getting fetched
    <li></li> // 
</ul>
<ul class="ul-1">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="ul-2">
    <li></li>
    <li></li>
    <li></li>
</ul>

//CSS code
.posts {
.clearfix;
list-style: none;
display: block;

li {
    position: relative;
    display: inline-block;
    margin: 1.25rem;

    transition: width .2s;
    width: 180px;

    @media (min-width: 950px) { width: 200px; }
    @media (min-width: 1200px) { width: 300px; }

    a {
        display: block;

        &:hover {
            img { opacity: .5; }
        }
    }

    img {
        margin: 0;
        transition: opacity .35s ease;
        width: 100%;
    }
}

ul {
    display: flex;
    justify-content: center;
    padding-left: 0;

    @media (max-width: 615px) {
        flex-direction: column;
        align-items: center;
    }
}

}