Responsive isotope version 2 masonry layout

Isotope is a nice script to organize and filter your portfolio or gallery item with some cool effects and functionality like masonry  layout support. Peoples are using Isotope very often and I am too on my Projects. It's may For non-commercial, personal, or open source projects and applications, see License.  But on the isotope version 2, I was facing responsive masonry issue and also sometimes appear problem.  it was very fine and responsive with the old version.

Well, then I mix it up the old responsive functionality with the new one and yes the masonry  Isotope  is also working fine


RESPONSIVE ISOTOPE VERSION 2 MASONRY LAYOUT
RESPONSIVE ISOTOPE VERSION 2 MASONRY LAYOUT


See the Demo of Responsive isotope version 2 masonry layout or Download the code

Please see the code below


jQuery(window).on("load resize",function(e){
	var $container = $('.isotope'),
	colWidth = function () {
		var w = $container.width(), 
		columnNum = 1,
		columnWidth = 0;
	//Select what will be your porjects columns according to container widht
	if (w > 1040)      columnNum  = 6;   
	else if (w > 850)  columnNum  = 5;   
	else if (w > 768)  columnNum  = 4;   
	else if (w > 480)  columnNum  = 3; 
	else if (w > 300)  columnNum  = 2; 
	columnWidth = Math.floor(w/columnNum);

	//Default item width and height
	$container.find('.item').each(function() {
		var $item = $(this), 
		width = columnWidth,
		height = columnWidth;
		$item.css( width: width, height: height );
	}); 

	//2x width item width and height
	$container.find('.width2').each(function() {
		var $item = $(this), 
		width = columnWidth*2,
		height = columnWidth;
		$item.css( width: width, height: height );
	}); 

	//2x height item width and height
	$container.find('.height2').each(function() {
		var $item = $(this), 
		width = columnWidth,
		height = columnWidth*2;
		$item.css( width: width, height: height );
	}); 

	//2x item width and height
	$container.find('.width2.height2').each(function() {
		var $item = $(this), 
		width = columnWidth*2,
		height = columnWidth*2;
		$item.css( width: width, height: height );
	}); 
	return columnWidth;
	},
	isotope = function () {
		$container.isotope({
			resizable: true,
			itemSelector: '.item',
			masonry: {
				columnWidth: colWidth(),
				gutterWidth: 10
			}
		});
	};
	isotope(); 


	// bind filter button click
	$('.isotope-filters').on( 'click', 'button', function() {
		var filterValue = $( this ).attr('data-filter');
		$container.isotope( filter: filterValue );
	});

	// change active class on buttons
	$('.isotope-filters').each( function( i, buttonGroup ) {
		var $buttonGroup = $( buttonGroup );
		$buttonGroup.on( 'click', 'button', function() {
			$buttonGroup.find('.active').removeClass('active');
			$( this ).addClass('active');
		});
	}); 

});

It's fully responsive and you are free to set column number as you need according to isotope container.


To customize, please see the custom.js file that contain the customization option of height and width of each items.

Related Post

htaccess Redirect Single URL to New Address Hello everybody, few days ago I have deleted a post but  that post has back link from other site. When  somebody come through that  address to my site...
Text to Image converter php script Protect Email ID Hi there, I did this project 1 year back and the first article about this script was in bangle. Today I will write that into English.  I prepared that...
Split domain name into sld and tld – php script A series of alphanumeric strings that are separated by periods, such as www.shariarbd.com, that is an address of a computer network connection and tha...
How to recover WP password installed on localhost I was looking for how to recover WordPress password installed on localhost. I got a way to recover, You may like it. Well, let us know how to do that....

5 thoughts on “Responsive isotope version 2 masonry layout”

Leave a Reply

Your email address will not be published. Required fields are marked *

*