Masonry

Official plugin web site:

http://masonry.desandro.com/

Notes:

  1. This plugin is great but not perfect because it won’t change item sizes automatically
  2. Doesn’t have to use “<div></div>”, <ul><li></li></ul> combination works fine. Just remember to set “float” to “left” of child items.
  3. If you wanna show items width different width or height, you need to calculate the size of every item. This site is a good example:
    http://erikjohanssonphoto.com/work/imagecats/personal/

    1. Width of container
    2. How many columns you want
    3. Define different sizes of child items

Example:

Width of container is 565px and 3 columns at most.(http://case.wikirex.com/sharon/celadon/work.php)

#thumbs{list-style:none; padding:0; margin:0;}
#thumbs > li.masonry-thumb{float:left; margin:0 0px 10px 0; background:#CCC; overflow:hidden;width:178px; height:117px;}
#thumbs > li.masonry-thumb img{width:100%;}
#thumbs > li.masonry-thumb.size1{width:366px; height:244px;}
#thumbs > li.masonry-thumb.size2{width:178px;height:244px;}
#thumbs > li.masonry-thumb.size3{width:366px; height:117px;}
function show_projects(data, cat){
	var $list = $('#thumbs').children().remove().end();

	var items = data.data;
	var item = items[0];

	for(var i = 0; i < 50; i++){
		var $li = $('<li class="masonry-thumb' + get_random() + '"></li>').appendTo($list);

		var image = $('#u_path').val() + 'products/' + item.id + '/small/' + item.photo;
		$li.append('<img src="' + image + '" />');

		$li.data({
			id: item.id
		});

	}


	thumbs_loaded();
}

function get_random() {
	var arr = ['', ' size1', ' size2', ' size3'];
	var index = Math.floor(Math.random() * arr.length);
	return arr[index];
}

function thumbs_loaded(){
	$c = $('#thumbs');
	$c.imagesLoaded(function(){
		$c.masonry({
			itemSelector: '.masonry-thumb',
			columnWidth: 84, 
			gutter: 10
		});
	});

	$c.children('li').each(function(index){
		var $this = $(this);
		var w = $this.width();
		var h = $this.height();

		if(w < h){
			$this.find('img').css({
				height: '100%', 
				width: 'auto'
			});
		}
	});
}

Append Items

var start = <?=$start?>;
var load_size = <?=$load_size?>;

$(document).ready(function(){
    init_masonry();

    $(window).scroll(function() {
        //console.log('window:' + $(window).height());
        console.log($(window).scrollTop());
        if(($(window).scrollTop() + 135) + $(window).height() >= $(document).height()) {
            start = start + load_size;
            get_feedbacks();
        }
    });
});

function init_masonry(){
    $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        columnWidth: 408, 
        "gutter": 65
    });
}

function get_feedbacks(){
    var params = {
        start: start, 
        load_size: load_size
    }

    $.get(base_url + 'api/page_api/pages', params, function(data){
        var items = data.response;

        if(items == null || items.length == 0) return;

        var $grid = $('.grid');
        var elems = [];

        //$grid.masonry('destroy');

        for(var i = 0; i < items.length; i++){
            var item = items[i];
            
            var elem = document.createElement('div');
            var $elem = $(elem);
            $elem.attr('class', 'feedback-wrap grid-item');
            $elem.css({
                width: '408px', 
                'margin-bottom': '44px'
            });
            $elem.append('<div class="square_header"><div></div></div>');
            $elem.append('<div class="content">' + item.summary + ' - ' + item.title + '</div>');
           
            elems.push($elem[0]);
        }

        var $elems = $( elems );
		setTimeout(function() {//Wait for images
			$grid.append( $elems ).masonry( 'appended', $elems );
		}, 500);
    });
}

Reference: