jquery-masonry

问题 According to the official documentation there are different ways to initialize the masonry container. The HTML initialization works fine, but when I try to move the parameters from the data-masonry attribute to JQuery, things break. Here is the HTML initialization with the JSON params. <div id="container" class="masonry js-masonry" data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item", "isFitWidth": true }'> And then this is what it currently looks like when I move

问题 jQuery Masonry is not working with jQuery but working with javascript. Can you tell me why? When I giving this code: console.log(typeof $.masonry) Showing "undefined" But if I giving this code : console.log(Masonry) Showing: function n(){y.apply(this,arguments)} 回答1: Wihtout passing the right arguments or in this case selector it won't show the actualy type (because the actuall selector is missing) Try it with typeof $('selector').masonry 来源： https://stackoverflow.com/questions/21234181

问题 Clicking each "more" button (which becomes "less") from left to right, the tiles don't reorganize correctly when clicking the button for the last tile of the first row until the window is resized (even by a tiny bit). initLayout:true and resize:true are enabled by default but even when explicitly setting them again when toggle() runs did not solve the problem. I initialize my grid both when the page loads and when toggle() runs: jQuery('.grid').masonry({itemSelector: '.tex-entry'}); Ok so far

问题 It looks like it keeps adding a new newHeight and a newDistance each time i click, I am trying to save original height with a global var at the top and using data to do that but i get weird results, basically i should be able to reset newDistance and newHeight to first original values as per before to run the lot with a click but it doesn't and i get new added values each time i click breaking my layout as a result: talents = $(".talenti"); filter = $(".filtra"); genHeight = $("#container")

问题 I am current working on a custom theme using Masonry. I successfully implemented masonry but i unfortunately, i can't figure out how can i implement a two column with different sizes. to have a clear view of what i'm trying to do, you can take a look at the image: the problem i encounter is i only can make a similar width. in my example, i want to have the first column (let's say) width = 250px and the 2nd column is comlumn = 400px. Thank you very much for your help. 回答1: i guess the work

问题 I'm trying to do a masonry layout with a bunch of tiles with some containing images. Here's roughly my code: var $mainContent = $('#main-content'); $mainContent.imagesLoaded(function() { $mainContent.masonry() }); loadMore = function() { $.ajax({ url: '/things', success: function (data) { var $data = $(data); $data.imagesLoaded(function() { $mainContent.append($data).masonry('appended', $data, true) }) } }) } $('#load-more').on('click', loadMore) However, when I run this, I get the following

问题 I am trying to use this npm package https://www.npmjs.com/package/masonry-layout As per install instruction I ran: npm install masonry-layout --save Then in my file, import '../../../node_modules/masonry-layout/dist/masonry.pkgd.min.js' $('.blog-posts-container').masonry({ // options ... itemSelector: '.card-blog', columnWidth: 200 }) I'm trying to import the package in my file and run it, but I get this error: Uncaught TypeError: $(...).masonry is not a function Im thinking there is

问题 I am using Vanilla Masonry (the raw JS, non-jQuery version) as follows: In head: <script id="masonry" type="text/javascript" src="resources/js/masonry.js"></script> In body: <script> window.onload = function() { var wall = new Masonry( document.getElementById('ext-component-3'), { columnWidth: 145 }); }; </script> But I keep getting: Uncaught ReferenceError: Masonry is not defined Uncaught TypeError: Cannot call method 'appendChild' of undefined Does anyone know what could be wrong in my

问题 I am trying to add pinterest-like item style to my gallery, but getting huge gaps between my thumbnails. Found several similar questions on SO, but none of them helped with my situation, unfortunately. script $('#container').masonry({ itemSelector: '.container', columnWidth : 100 }); gallery <div id="container"> <div class="item">...</div> </div> styles .item { width: 122px; margin: 5px; float: left; background-color: gray; } http://jsfiddle.net/D7QQU/44/ Thanks in advance 回答1: Here's a

问题 <style> #container { float: left; max-width: 900px; } .item { float: left; width: 300px; } </style> <div id="container"> <div class="item">Much of Text</div> <div class="item">Much of Text</div> <div class="item">Much of Text</div> <div class="item">Much of Text</div> <div class="item">Much of Text</div> <div class="item">Much of Text</div> <div class="item">Much of Text</div> </div> I get Mansory working in all situations great: with applied to #container max-width property alone and float: