css不同高度的div网格空间

Question

我的问题与此类似：CSS不同高度的div元素导致网格间距。但是不同数量的div.

请给出一些想法！

我用js把盒子放到一个绝对的位置。然而，div有时不在正确的位置！

       <?php foreach ($list as $row): ?> 
            <div  class="box col-md-3 col-lg-3 col-sm-2 col-xs-2" >
                <a href="single/<?php echo $row->id; ?>">
                    <img class="img-thumbnail img-avatar" src="/images/<?php echo $row->avatar; ?>" alt="photo"/>
                </a>  
                <br />
                <label class="label label-info">
                    <?php echo $row->name; ?>
                </label> 
                <br/>
                <label class="label label-info">
                    age：  <?php echo $row->age; ?>
                </label>
            </div>
        <?php endforeach; ?>

       <script>
        $(document).ready(function () {

            var width = $(window).width();
            var height = $(window).height();
            var dw = Math.floor(width / 3) - 5;
            $(".div-candidate").width(dw);
            var cds = $(".box");
            var n = cds.size();
            var w = dw;
            var h1 = 0;
            var h2 = 0;
            var h3 = 0;
            for (i = 0; i < n; i++)
            {
                //  var d =  $(cds)[i];
                if (i % 3 === 0) {
                    var t1 = h1;
                    h1 = h1 + $(cds[i]).height() + 5;
                    $(cds[i]).css({"top": t1, "left": 0});
                }
                if (i % 3 === 1) {
                    var t2 = h2;
                    h2 += $(cds[i]).height() + 5;
                    $(cds[i]).css({"top": t2, "left": w + 5});
                }
                if (i % 3 === 2) {
                    var t3 = h3;
                    h3 += $(cds[i]).height() + 5;
                    $(cds[i]).css({top: t3, left: (w + 5) * 2});
                }
            }
            var m = Math.max(h1, h3, h2);
            $("#div-container").height(m);
        });
    </script>

Answer 1

我通过添加windows.load（）