I am creating a masonry layout in 2 columns using images of different sizes. Images can be of any size if they have the largest common divisor (as required by the Freemasonry plugin).
To make the layout responsive, I convert the width of the masonry elements to percentages (or I can use the minimum width and width of 100%).
Update: I noticed that many of those in charge make both columns 50% as a solution. It works, but it is not the goal. Images must retain the original image size. They can be reduced, but keep the same ratio.
$(function () { var container = $('#container'); // Convert .box width from pixels to percent $('.box').find('img').each(function () { var percent = ($(this).width()) / container.width() * 100 //convert to percent; $(this).closest('.box').css('max-width', percent + '%'); }); // Trigger masonry container.masonry({ itemSelector: '.box', columnWidth: 1 //widths dividable by 1 }); });
jsfiffle: http://jsfiddle.net/AMLqg/278/
It seems to work. Elements are fluid when the window is resized. However, if you load the script into a small window size (less than the width of column 2), the elements collapse. How can I save masonry elements responsive to window loading even when the window is smaller?
Update: Here you will find more information for a better understanding. I am trying to save 2 response columns regardless of window size. Columns cannot have equal widths because images have different widths. For this reason, I use columnWidth: 1 because all widths are divisible by 1.
See the pictures below for an example.
Problem: When you open the page in a small window, the elements are reset. When you resize the window to be larger, the elements remain folded until the window is wider than the width of both elements.
Purpose: I am trying to save elements in 2 responsive columns when loading, as in the image below. Currently, they remain responsive if you download a large window, and you reduce its size, but not vice versa, when the window is small when loading, and you make it larger.
