https://kamaszszerviz.hu/masonry/script2.js

1// Load is used to ensure all images have been loaded, impossible with document
2
3jQuery( window ).load( function() {
4
5
6
7    // Takes the gutter width from the bottom margin of .post
8
9	var gutter = parseInt( jQuery( '.post' ).css({ 'marginBottom': '30px' }) );
10	
11	var container = jQuery( '#posts2' );
12
13
14
15	// Creates an instance of Masonry on #posts2
16
17	container.masonry({
18		gutter: gutter,
19		itemSelector: '.post',
20		columnWidth: '.post'
21	});
22	
23	
24	
25	// This code fires every time a user resizes the screen and only affects .post elements
26	// whose parent class is .container-fluid. Triggers resize so nothing looks weird.
27	
28	jQuery( window ).bind( 'resize', function(){
29		if ( jQuery( '#posts2' ).parent().hasClass( 'container-fluid' ) ) {
30			
31			
32			
33			// Resets all widths to 'auto' to sterilize calculations
34			
35			post_width = jQuery( '.post' ).width() + gutter;
36			jQuery( '.container-fluid #posts2, body > .container-fluid' ).css( 'width', 'auto');
37			
38			
39			
40			// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
41			
42			posts_per_row = jQuery( '#posts2' ).innerWidth() / post_width;
43			floor_posts_width = ( Math.floor( posts_per_row ) * post_width ) - gutter;

44			ceil_posts_width = ( Math.ceil( posts_per_row ) * post_width ) - gutter;
45			posts_width = ( ceil_posts_width > jQuery( '#posts2' ).innerWidth() ) ? floor_posts_width : ceil_posts_width;
46			if ( posts_width == jQuery( '.post' ).width() ) posts_width = '100%';
47			
48			
49			
50			// Ensures that all top-level .container-fluid elements have equal width and stay centered
51			
52			jQuery( '.container-fluid #posts2, body > .container-fluid' ).css( 'width', posts_width );
53			jQuery( 'body > .container-fluid' ).css({ 'margin': '0 auto' });
54		
55		
56		
57		}
58	}).trigger( 'resize' );
59	
60
61
62});