jquery-masonry

问题 is there a way to get jquery masonry working with percentage width divs? I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0 HTML markup: <div class="boxes"> <div

问题 I'd like to stack my Masonry bricks from the bottom up. This question was answered before, but that modification and fork of Masonry use a very old version of the script now. The newer version of Masonry has bug fixes which I needed. So does anyone know how to apply the old solution to the newer script? Here is the old solution. var position = (opts.fromBottom) ? { left: props.colW * shortCol + props.posLeft, bottom: minimumY } : { left: props.colW * shortCol + props.posLeft, top: minimumY };

问题 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

问题 I've been fighting with Bootstrap and Masonry for over 3-4 hours now and searched tons of articles but couldn't find the solution. Here's the thing: I have Bootstrap Grid that looks like this: <div class="itemsContainer"> <div class="col-md-6 item"></div> <div class="col-md-3 item"></div> <div class="col-md-3 item"></div> </div> In total there are 12 columns and without Masonry it works just perfect. But as soon as I include Masonry, the third column drops down. If I make it 6-6 columns or 4

问题 I want to sort my products in the list.phtml, I want to have one big product in the right, I want to be like in this image. My HTML code is like this: <ul class="products-grid row four-columns first last odd"> <li class="item type-1 quick-view-container"> <div class="quick-view-data-container"></div> <div class="inner"> <div class="image-box"> <div class="product-labels-wrapper clearfix"> <a class="product-image" title="" href="tori-tank.html"> <div class="ajax-media-overlay"> <div class=

问题 I've got a ton of problems surrounding the combination of Masonry and infinite scrolling in Wordpress, namely on this page. I gather getting Masonry to work with infinite scrolling requires a callback within the infinite scroll jQuery code - this seems to be well-established. However, I can only seem to get infinite scrolling working on my Wordpress site under very specific circumstances, and given those circumstances I'm not sure how to integrate Masonry. This code is borrowed from the

问题 I am using the appended function to append elements to an already initialized masonry instance, but all of my tiles are being laid out in a single column and many are overlapping. Can you see what I am doing wrong? function placeNewsTiles(news){ //places news tiles var length = (news.data.length > 20) ? 20 : news.data.length; var $container = $('#news'); var elems =""; for(var i = 0; i < length; i++){ elems += '<div class="pageNewsItem" id="'+ count + i + '">\ <div class="textWrap">\ <a href=

问题 I am displaying the wordpress posts on my blog index page in a masonry layout. I also have the masonry activated on footer, to display the wordpress footer widgets in a masonry layout. So basically I have 2 masonry containers on the same page . 1. One for displaying the blog posts, and 2. Other for displaying the footer widgets. The html markup for the page looks like this: HTML <!-- Posts --> <main id="main"> <div class="testmason"> <article class="hentry">Post 1</article> <article class=

问题 I don't know how to explain this without an image. Please take a look. I'm fairly sure I've done everything correctly, but for some reason the divs are not moving down. Here's my code: HTML <div id="gallery-container" class="js-masonry" data-masonry-options='{ "columnWidth": ".gallery-column-sizer", "gutter": ".gallery-gutter-sizer", "itemSelector": ".gallery-item" }'> <div class="gallery-column-sizer"></div><div class="gallery-gutter-sizer"></div> <div class="gallery-item"><a href=""><img

问题 I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size. (function ($) { Drupal.behaviors.views_fluidgrid = { attach: function