jQuery Masonryを利用した、動的グリッドレイアウト

デモ

テキストテキストテキストテキスト

テキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキスト

テキストテキストテキストテキスト

テキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキスト

テキストテキストテキストテキストテキストテキスト

テキストテキスト

ソース

javascript

$(function(){
  var boxMaker = {};
  boxMaker.makeBoxes = function() {
    var boxes = [],
        count = Math.random()*4;
    for (var i=0; i < count; i++ ) {
      var randomSpan = 'span' + Math.ceil(Math.random()*3);
      var box = document.createElement('div'),
          text = document.createTextNode(randomSpan);
      box.className = 'box well ' +  randomSpan;
      box.appendChild(text);
      boxes.push(box);
    }
    return boxes;
  };

  var container = $('#dynamic-grid-area');

  container.imagesLoaded(function(){
    $(container).masonry({
      itemSelector: '.box',
      columnWidth: 100
    });
  });
  $('#prepend').click(function(){
    var boxes = $(boxMaker.makeBoxes());
    container.prepend(boxes).masonry('reload');
  });
  $('#append').click(function(){
    var boxes = $(boxMaker.makeBoxes());
    container.append(boxes).masonry('appended',boxes);
  });


  container.infinitescroll({
    navSelector  : 'div#loading-area',
    nextSelector : 'div#loading-area a',
    itemSelector : '.box',
    animate      : true,
    loading      : { finishedMsg: 'もうないよ.',
                     img: '/img/loading48x48.gif'
                   }
    },
    function(newElements) {
      var newElems = $(newElements).css({opacity: 0});
      newElems.imagesLoaded(function(){
        newElems.animate({opacity: 1})
                .css('text-align','center')
                .css('top','50%');
        container.masonry('appended', newElems, true);
      });
    }
  );
});

HTML

<div class="well">
<button class="btn btn-middle btn-primary" id="prepend">前に追加</button> 
<button class="btn btn-middle btn-primary" id="append">後ろに追加</button>
</div>
<div id="dynamic-grid-area">
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span2">テキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span3">テキストテキストテキストテキストテキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
<div class="box well span1">テキストテキスト</div>
</div>

<div id="loading-area">
<p class="alignC"><a href="pages/2.html"></a></p>
</div>

CSS

#infscr-loading {
  width:200px;
  text-align:center;
  position:fixed;
  left:45%;
  bottom:220px;
  z-index:100;
  padding:10px;
  background:#000;
  opacity:0.8;
  color:#FFF;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  font-size:15px
}