jquery-masonry

问题 It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like before jquery readies the page or something. Here my jquery call: $(document).ready(function(){ $('#image_roll_container').masonry({ itemSelector: '.box' }); .... Here's the page in question: http://ratattoos.com/ it works just fine in firefox and

问题 I've been trying Masonry but can't get it to work exactly as I wanted. The elements I use vary in width and height, but all fit in a grid (4 different sizes, all multiple of smallest+margins). I've also calculated a distribution of elements (7 of the smallest, 4 of all the others) that can fit precisely. However it's rare that masonry manages to fit them neatly, sometimes there's one lurking at the bottom, sometimes several are misplaced. It's always so that in one view I can see what items

问题 I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div. How to contain these images in and not prevent overlap. imagesLoaded method has been deprecated I think. ok here is my code: Example of the image in the partial. There will be many <div class="container span3" > <div class="image"> <div class="content"> <a href="

问题 I am using Masonry for the layout of my website, everything works fine, but there is an issue with a responsiveness. At the moment all elements are set to a width of 31.8% (also have some margins etc..) I was assuming that by resizing a browser window I will still keep 3 columns, but all element's would just decrease in width, however that was not the case, by resizing a window everything starts falling apart, I can't tell where this strange behaviour is coming from. You can see my live demo

问题 I need to use them in my ember-cli project. How to start? I writed in terminal: bower install isotope --save then in my ember-cli-build.js I added app.import ecc... , but then I don't know what to do. Where to put my intialization script, like this: $('.grid').isotope({ // options itemSelector: '.grid-item', layoutMode: 'fitRows' }); If I put it in application.hbs it give to me an error and when i change route with {{#link-to}} it doesn't work anymore. What to do? In the web there aren't many

问题 Im trying to implement a filter on the jQuery-masonry. But the problem is if i hide a middle element, others dont rearrange. This leaves lots of gutters in between. Tried the .masonry('reload'); Caan anyone please help. 回答1: There is an open issue. Workaround: use :visible on your selector. $('#container').masonry({ itemSelector: '.mybrick:visible' }); 来源： https://stackoverflow.com/questions/12530966/jquery-masonry-items-dont-rearrange-on-hiding-a-div-element

问题 I'm looking for loading images from a FlickrSet, into a bootrasp 3 container and resizing with Masonry. I see that container height is everytime equal to 0. I think that I need to use imagesLoaded but seems that imagesLoaded doesnt' work. Simply, container height is 0. This is code, someone could help me? var $gallery = $('#gallery'); if ($gallery.length!=0) { var url1 = 'http://api.flickr.com/services/feeds/photoset.gne?set='; var url3 = '&nsid='; var url5 = '&lang=en-us&format='; var url7 =

问题 I'm trying to apply Masonry to this batch of code: <?php //If There Are No Posts In The DB if(condition) : ?> <p> There Are Currently No Posts On This Site.</p> <?php //If There Are Posts In The DB - Loop Through All The Posts else : ?> <div id="masonry-grid"> <div class="gutter-sizer"> <?php foreach ($a as $b) : <div class="grid-item"> <img src="source/of/the/image"> </div> <?php endforeach; ?> </div> </div> <script> $(document).ready(function(){ var $container = jQuery('#masonry-grid');

问题 I have the following function: namespace.utils.pageReorder(feed, function() { console.log('complete'); // do some stuff here no reorder has completed }); ------------- pageReorder: function(feed, callback) { feed.masonry('reloadItems'); feed.masonry('layout'); callback(); }, What i need to be able to do is to only call the callback once the masonry layout has completed. I know masonry has the following method but im not sure how to integrate it into my function. msnry.on( 'layoutComplete',

问题 I need to have multiple Masonry grids per page. I'm generating the code with a wordpress loop, so every div container has the same class name. Is there a way to call Masonry on all div containers with the same name? html <!--Masonry 1--> <div class="print-slider"> <div class="print-slider-sizer"></div> <div class="gutter-sizer"></div> <div class="print-slider-item"></div> <div class="print-slider-item"></div> <div class="print-slider-item"></div> <div class="print-slider-item"></div> </div> <