瀑布流布局

minigrid.zip   js 压缩包

<div class="demo2">
     <div class="grid">
            {% for key, value in product.uploadfiles %}
            <div class="grid-item">
                <div class="img com-img"><img src="{{ value | img_url | img_format }}" alt="{{ value | img_url | img_format }}"></div>
            </div>
            {% endfor %}
     </div>
 </div>
    
<script src='{{ "minigrid.js" | asset_url }}'></script>
<script>
    (function(){
        function initializeGrid() {
            minigrid('.grid', '.grid-item', 2, null, function(){
                var d = document.querySelector('.demo2');
                d.style.opacity = 1;
            });
        }
       
        // 延时触发，确保所有图片加载完成后再初始化 minigrid
        window.addEventListener('load', function() {
            setTimeout(initializeGrid, 100); // 根据需要调整延迟时间
        });

        // 监听窗口大小变化，触发重新布局
        window.addEventListener('resize', function(){
            minigrid('.grid', '.grid-item');
        });
    })();
</script>

.demo2{position:relative;opacity:0;transition:.2s ease;margin-bottom:30px}
.demo2 .grid{position:relative;margin:0 auto;width:98%}
.demo2 .grid-item{position:absolute;top:0;left:0;width:48%;border-radius:0;background-color:#fff;-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out}
.demo2 .grid-item .img{margin-bottom:20px}
.demo2 .grid-item .img img{width:100%;display:block}
@media (max-width:600px){
.demo2 .grid-item{width:48%}
.demo2 .grid-item .img{margin-bottom:10px}
}