framework7

Open full view…

masonry layout

Robert Regue
Mon, 28 Jul 2014 05:25:30 GMT

I am trying to have a page with a masonry layout style and I am using http://masonry.desandro.com/. After loading the images for first time it works really nice, the issue comes if I click on an image and then go back. The grid does not resize properly. I am using the imagesloaded plugin to make sure all images are loaded. Is this the right approach or is there a better way to do it? As a way around it I was thinking about using the grid layout with fixed height and center cropping the images, but I would like to avoid this. Thanks in advanced for the help!

Vladimir Kharlampidi
Mon, 28 Jul 2014 08:06:24 GMT

It should be fine, did you init and reinit masonry layout within pageInit callback?

Robert Regue
Mon, 28 Jul 2014 16:02:59 GMT

This is what I do: if (page.name=='grid') { //create grid list using data (image and name) myApp.createGrid(myApp.data); var $grid = $('#gridContainer'); $grid.imagesLoaded( function() { $grid.masonry({ columnWidth: 150, itemSelector: '.element', gutter: 10, }); }); } myApp.data can vary and creatGrid() loops through a simple template and created the html on the #gridContainer. Is there a better way to do it?

Vladimir Kharlampidi
Mon, 28 Jul 2014 16:14:03 GMT

The first potential problem i see here is using of ID attribute in '#gridContainer' selector. Try to use classes instead: --- var $grid = $(page.container).find('.gridContainer');