css farklı yükseklik div ızgara alanı

Question

Soruma benzer: CSS different height div elements causing grid spacing. Ama çok sayıda div ile.

Lütfen biraz fikir verin!

J düğmelerini kullanarak kutuyu mutlak bir konuma getirdim. Ancak, div bazen doğru yerde değil!

 <?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

Ben eklenti windows.load() tarafından benim sorunu çözmek