javascript mobile-friendly responsive waterfall plug-in example demonstration

 

online preview

jQuery Plugin Daquan

example code

<div class="sucaihuo-container">
            <div class="demo">
                <div class="grid">
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 245px;"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 290px;"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 140px;"></div>
                    <div class="grid-item" style="height: 200px"></div>
                    <div class="grid-item" style="height: 150px"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 220px"></div>
                    <div class="grid-item" style="height: 205px"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                </div>
            </div>
        </div>
        <script src="/api/jq/5733e32cbe7f1/js/minigrid.js"></script>
        <script>
        (function() {
            minigrid('.grid', '.grid-item', 6, null,
                    function() {
                        var d = document.querySelector ('. demo');
                        d.style.opacity = 1;
                    }
            );
            window.addEventListener('resize', function() {
                minigrid('.grid', '.grid-item');
            });
        })();
        </script>