jquery-masonry

问题 I'm working working on Responsive Layout where I'm using JQuery Masonry as well. I'm using following script to get current column width. var curWidth; var detector; detector = $('.magic-column'); curWidth = detector.outerWidth(true); $(window).resize(function(){ if(detector.outerWidth(true)!=curWidth){ curWidth = detector.outerWidth(true); } }); My JQuery Masonry init script is something like this.. $(window).load(function(){ $(function (){ $wall.masonry({ singleMode: true, columnWidth:

问题 So, I'm using Masonry to make a "fluid" layout in my site but now I've encountered a problem involving its hide and reveal methods. In an event, I'm making this call: $container.masonry('hide', $(this)); As you can see, I'm using $(this) to tell masonry what element to hide through jquery But apparently, this method does not work with a jquery element? The error message in my console looks like this: Uncaught TypeError: Object #<HTMLElement> has no method 'hide' (masonry.pkgd.min.js:9) I

问题 I am using a masonry plugin but my images are overlapping when the page first loads. If I change the width of the browser they fall into place. The developer told me to do the following but I am unsure how to "add it: to my custom.js file properly. I was just told to: // with jQuery var $container = $(’#container’); // initialize Masonry after all images have loaded $container.imagesLoaded(function(){ $container.masonry(); }); Can anyone properly format this advice so I can use it? 回答1: He

问题 I have tested masonry.js with multiple columns successfully but with my application I have the need to add masonry items dynamically using .ajax() JSON data. At the moment I have chosen to use .append() to layout the initial masonry .items - The issue is that all of the masonry items are being output in a single column. The container size changes didn't help, even when increasing the amount of container width to more than enough, it will not style to 3 columns. Even when using the

问题 i got this javascript, trying to remove a class on a parent element: $(this).parents(".box").removeClass("expanded"); on this html: <div class="box trx"> <a href="javascript:;" class="open-content"><?php the_post_thumbnail('thumbnail'); ?></a> <div class="expandable"> <?php the_content(); ?> <span class="simple"> <a class="cunload" href="javascript:;">Close</a> </span> </div> </div> Unfortunately, this doesn't work so far. I've done several tests like: $(this).parents(".box").removeClass("trx

问题 I'm using JQuery and Masonry and as you can see from the image the boxes doesn't stack properly. The side margins are great but the top/bottom gives random amount of large space in between. Anybody who can help me here? CSS for the boxes: div.article { background-color: white; margin-right: 6px; padding: 20px 10px; width: 155px;} Screenshot of problem: https://skitch.com/subzane/f8n36/2010-andreas-normans-blogg Solution: It seems the error only appeared when using custom fonts. And to fix

问题 I have implemented jQuery masonry to our site and it works great. Our site is dynamic and users must be able to add/remove masonry box's. The site has an add example but no remove example. Our db is queried returning x number of items. Looping through they are loaded and displayed. Here's a code sample: (we are use F3 framework and the F3:repeat is it's looping mechanism.). <div id="container" class="transitions-enabled clearfix" style="clear:both;"> <F3:repeat group="{{@productItems}}" value

问题 This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 7 years ago . I have installed turbolink gem https://github.com/rails/turbolinks in my rails app 3.2.8. I use this gem, masonry for show elements https://github.com

问题 I have a layout like this. I am using passsy extension for angular masonry . <masonry column-width="200"> <div class="masonry-brick" ng-repeat="data in comments"> <div ng-switch on="data.type"> <div ng-switch-when="hoots"> <article class="hoot_main"> //content goes here //hoot_main is the main class for this div layout </article> </div> </div> </div> <div ng-switch on="data.type"> <div ng-switch-when="article"> <article class="hoot_main"> //content goes here //hoot_main is the main class for

问题 I'm trying to center a masonry container on a page. At the moment, it's aligned to the left. I have margin auto in my CSS and isFitWidth: true in JS, but neither seems to be doing anything. I've also tried putting display:block in my CSS. This is the HTML; <div id="masonry_container" class="group"> <div class="masonry_item"> <a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank"> <img src="images/storyville_home.png" alt="Storyville Entertainment"/> <h3>Storyville