javascript - Bootstrap + Masonry add blank divs when grid have empty spaces at the bottom -

i'm using masonry + bootstrap , notice when have 3-column grid have 10 items, display 3x4 grid having 2 blank spaces @ bottom. how automatically add 2 empty divs @ bottom fill , not having blank spaces? total div become 12 wherein 2 divs blank?

this isn't supposed fixed 3-column should dynamically add empty divs whenever detected there n number of empty divs filled up. should applicable on load , on resize.

there no problem .item size since have same width , height (box/square type)

i made jsfiddle add fillers on empty spaces on last row. working on on resize using layoutcomplete event. problem is, whenever resize, keeps on appending new fillers.

try re-sizing different sizes , you'll notice keeps on adding fillers.

in case, here's code well.

html

<input type="hidden" name="hftotalgriditems" id="hftotalgriditems" value="10" /> <div class="grid">     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div>     <div class="item">         <div>lorem</div>     </div> </div> <div class="result"></div> 

css

.grid {     margin: 0 auto; } .item {     margin-bottom: 20px;     border: 1px solid red;     height: 80px;     width: 80px;         } .filler {     background-color: #999;     border: 1px solid blue; } 

jquery

$(function () {     function calculaterows() {         var lisinrow = 0;         var $item = $('.grid .item');         var $grid = $('.grid');         var itemwidth = $('.grid .item').width();         var itemheight = $('.grid .item').height();          $item.each(function () {             if ($(this).prev().length > 0) {                 if ($(this).position().top != $(this).prev().position().top) return false;                 lisinrow++;             } else {                 lisinrow++;             }         });          var lisinlastrow = $item.length % lisinrow;         if (lisinlastrow == 0) lisinlastrow = lisinrow;          $('.result').html('no: of lis in row = ' + lisinrow + '<br>' + 'no: of lis in last row = ' + lisinlastrow);          if (lisinlastrow < lisinrow) {             var $cloneditem = $('.grid .item:last-child').clone().empty().css({                 width: itemwidth,                 height: itemheight             }).addclass('filler');             $grid.append($cloneditem).masonry('appended', $cloneditem);          } else {             if (newtotal > $('#hftotalgriditems').val()) {                 $grid.masonry('remove', $('.grid .item.filler'));                 $grid.masonry();             }         }     }      var $grid = $('.grid');      $grid.masonry({         itemselector: '.item',         isfitwidth: true,         gutter: 20     });      $grid.masonry('on', 'layoutcomplete', function (event) {         calculaterows(event.length);     });      $grid.masonry(); }); 

there 2 things need check

1. if number of original boxes evenly divisible number of boxes in first row (originalboxs % lisinrow === 0).

2. if number of boxes greater max allowed number of boxes. can calculate max allowed boxes below

   var totalallowed = lisinrow; while (totalallowed < originalboxs) {    totalallowed += lisinrow; } 

if true, should remove of excess boxes. otherwise add in filler boxes. here updated jsfiddle

i added updated jquery code below

$(function () {      // remember original box lenth.      var $item = $('.grid .item');     var originalboxs = $item.length;      function calculaterows() {          var lisinrow = 0;         var $item = $('.grid .item');         var $grid = $('.grid');         var itemwidth = $('.grid .item').width();         var itemheight = $('.grid .item').height();          // calculate how many boxes in first row.          $item.each(function () {             if ($(this).prev().length > 0) {                 if ($(this).position().top != $(this).prev().position().top) return false;                 lisinrow++;             } else {                 lisinrow++;             }         });          // calculate how many boxes in last row.          var lisinlastrow = $item.length % lisinrow;          $('.result').html('no: of lis in row = ' + lisinrow + '<br>' + 'no: of lis in last row = ' + lisinlastrow);          // total allowed boxes on page.          var totalallowed = lisinrow;         while (totalallowed < originalboxs) {             totalallowed += lisinrow;         }          if (($item.length > originalboxs && originalboxs % lisinrow === 0) || ($item.length > totalallowed)) {             // if number of original boxes evenly divides number of boxes in row.             // or number of boxes on page past max allowed.              // remove filler boxes.              var boxestodelete = $('.grid .item.filler');             var deleteboxes = $item.length - totalallowed;             (var = 0; < deleteboxes; i++) {                 // delete unnesecary boxes.                  $grid.masonry('remove', boxestodelete[boxestodelete.length - - 1]);             }         } else if (lisinlastrow !== 0) {             // if last row not equal 0 , number of boxes less original + first row             // fill in new boxes.              var $cloneditem = $('.grid .item:last-child').clone().empty().css({                 width: itemwidth,                 height: itemheight             }).addclass('filler');             $grid.append($cloneditem).masonry('appended', $cloneditem);             }      }      var $grid = $('.grid');      $grid.masonry({         itemselector: '.item',         isfitwidth: true,         gutter: 20     });      $grid.masonry('on', 'layoutcomplete', function (event) {         calculaterows(event.length);     });      $grid.masonry(); });