Official plugin web site:
Notes:
- This plugin is great but not perfect because it won’t change item sizes automatically
- Doesn’t have to use “<div></div>”, <ul><li></li></ul> combination works fine. Just remember to set “float” to “left” of child items.
- 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/- Width of container
- How many columns you want
- 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)
1 2 3 4 5 6 |
#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;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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: