title: Turning selection of divs into a grid with jquery
body: <p>I have a page with a load of divs that I'm trying to put into 4 columns dynamically with jquery.</p>
  
  <p><a href="http://www.jeremymcminn.com/trent" rel="nofollow">http://www.jeremymcminn.com/trent</a></p>
  
  <p>Instead of the divs .item being put inside the 4 columns separately, they are nested down from one another all in one column (apart from one on column 2).</p>
  
  <p>Any help would be appreciated to what I am doing wrong and how I can get the .item divs into 4 columns.  The code below is what I am using.</p>
  
  <pre><code>$( function() {
  
      var kLazyLoad = $K.lazyLoad,
          kLazyLoadInit = $K.lazyLoadInit,
          kPageLoading = false,
          kColNext = 0,
          kColLength = parseInt( $('#grid').attr('class').replace('col-',''), 10 ),
          regaleLazyLoad = function(override) {
              if (override) { kLazyLoad(); }
          },
          regaleLazyLoadInit = function(override) {
              $K.lazyLoadInit();
              setTimeout( function() { $K.lazyLoad(true); }, 100);
          }
  
      $K.lazyLoad = regaleLazyLoad;
      $K.lazyLoadInit = kLazyLoadInit;
  
      (function() {
          var colContainer = '';
          for ( var i = 0, len = kColLength; i &lt; len; i++ ) {
              colContainer += $('#grid').html();
          }
          $('#grid').html(colContainer);
      })();
  
      var updateGrid = function() {
          kPageLoading = false;
          $('#container &gt; .item').each(function(i,item) {
              $(item).appendTo($('.column:eq('+kColNext+')'));
              kColNext = (kColNext+1 &gt;= kColLength) ? 0 : kColNext+1;
          });
          window.setTimeout(function() {
              var longestCol, shortestCol;
              $('.column').each(function(i,column) {
                  if (!longestCol || $(column).outerHeight(true) &gt; longestCol.outerHeight(true)) {
                      longestCol = $(column);
                  }
                  if (!shortestCol || $(column).outerHeight(true) &lt; shortestCol.outerHeight(true)) {
                      shortestCol = $(column);
                  }
              });
              var lastItem = longestCol.find('.item:last');
              lastItem.css('display','none');
              window.setTimeout(function() {
                  if (longestCol.outerHeight(true) - shortestCol.outerHeight(true) &gt; shortestCol.outerHeight(true)/3) {
                      lastItem.appendTo(shortestCol);
                  }
                  lastItem.css('display','block');
                  regaleLazyLoad(true);
              },1);
          },50);
      }
  
      $(window).off('.rjs').on('scroll.rjs', function() {
          regaleLazyLoad(true);
          if (kPageLoading) { return false; }
          if ( $(document).scrollTop() + $('#grid').offset().top &gt; ($('#grid').offset().top + $('#grid').height()) - $(window).height()*3 || $('.k-lazy-loading').length &lt; 15 ) {
              kPageLoading = true;
              $K.infinity.next();
          }
      });
  
      $K.infinity.check = $.noop;
  
      $(window).on('k-infinite-loaded', updateGrid).trigger('k-infinite-loaded');
      $(window).on('k-resize', function() {
          regaleLazyLoadInit();
      });
  
      regaleLazyLoadInit();
  
  });
  </code></pre>