jquery-masonry

I am using ajax to refresh a div containing images. I use masonry to add layout initially. Then the ajax call returns a js that refreshes the div using the html() method. Now after it completes I am calling masonry('reloadItems') . But masonry loads all images onto one another. After a page resize it works. I tried manually triggering the page resize but it doesnt make masonry make the adjustments. JS: $('#timerange-select, #category_select').bind('change', function() { form=$('#images-filter-form'); $.get(form.action, form.serialize(),function(){ var $container = $('#images_container');

I got Masonry to work in my AngularJS app using the angular-masonry directive but I want to be able to call a function or method in my controller that will trigger a reload of items in the container. I see in the source code (lines 101-104) there is a reload method but I'm not sure how to invoke that. Any ideas? Thanks! In case it's of use to someone in the future, Passy watches for an event called masonry.reload. So, you can issue this event and Passy should call 'layout' on the masonry element, e.g. call $rootScope.$broadcast('masonry.reload'); In my case, I had some third-party javascript

As you can see on this page http://musicglaze.com/chase-status-let-you-go-feat-mali-feed-me-remix/#comments comment section is way out of place, After research I understood that it is caused because plugin responsible for styling ( http://masonry.desandro.com/ ) is called within $(document).ready(function(){ }); function. however, content is loaded into iframe after that, therefore changing its height, but as plugin takes into account its original height without content everything gets messed up. Is there something I can use which would behave similar to this pseudocode? Document ready AND

RequireJS newbie here. Trying to convert some JQuery code I had working fine in the old way to work w/ RequireJS. Header of my page loads three JS files via script tags -- require.js itself, my require.cfg.js, and boot/main.js with the site-specific functionality. Relevant require.cfg.js excerpt: ,paths: { 'boot': 'src/boot' ,'jquery': 'lib/jquery.min' ,'jquery.masonry': 'lib/plugins/masonry.pkgd.min' ,'jquery.imagesloaded': 'lib/plugins/imagesloaded.pkgd.min' } ,shim: { 'jquery': { exports: 'jQuery' } ,'jquery.masonry': ['jquery'] ,'jquery.imagesloaded': ['jquery'] } boot/main.js: require([

I've found this template that demonstrates the issue I'm having with jquery masonry and image layout. Take a look at this twitter bootstrap template page : The very first time the page is loaded all the images are stacked on each other until a page refresh or re-size is done. The images are then displayed correctly. Here is my HTML and jQuery that has the same problem: HTML <div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;"> <div id="loading">Loading ...</div> </div> jQuery $.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data

I remember a CSS grid system alternative to Masonry (Vanilla) http://masonry.desandro.com/ . That site was black background and displaying/arranging colored boxes (periodic table elements) . It also had filtering boxes based on their shapes and size (like round, square e.t.c) . It was also using hardware acceleration. I spend a lot of time to find it but no luck. Anyone knows this site? Why not just check the source of its counterpart, Isotope: http://isotope.metafizzy.co/index.html I'm using this. And it works great with Bootstrap. Basically instead of container, I am using WALL: <style>

I'm having issues integrating masonry with a Foundation grid layout. Essentially with identical width images with varying height, the masonry works as expected but at certain breakpoints the grid only will have a two column layout as opposed to the usual four. However if you keep minimizing the browser width, the four columns return so it can't be that there isn't the room to display them. var $container = $('#work_grid'); $container.imagesLoaded( function(){ $('#work_grid').masonry({ itemSelector: '.work_item', isAnimated: true, }); HTML <div class="row"> <div class="twelve columns"> <div id=