CSS不同的高度div网格空间

Question

我的问题与此相似： CSS不同的height 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（）解决了我的问题