jquery-masonry

问题 I want to create a video gallery using Masonry on my website but I'm having difficulty. I'm using Joomla as my CMS and already have a template im using from rocket themes but on one of my pages I want to have a list of videos (which I'll update) for people to watch. I want to make it visually appealing and masonry caught my eye but I fail to understand how to get it up and running. How does Jquery work with Joomla, if it does at all? 回答1: The masonry plugin let you define a grid with images

问题 Please don't consider my question as a duplicate. I just din't succeed trying Display divs with different sizes with CSS As suggested in the above post i used Masonry . But failed to get it worked. I am using codeigniter. Here are the css i am using #container { width:90%; margin:3% 0px 0px 10%; } .item { margin:10px 10px 10px 10px; float:left; width:240px; border:5px solid #f0f0f0; background-color:#d2dbde; border-radius:5px; } Javascript and js files <!-- include js files --> <script type=

问题 I have a backbone fetch view method that does this: var ResultsView = Backbone.View.extend({ template : _.template($("#result_template").html()), render : function() { this.collection.each(function(result) { var $output = $(this.template(result.toJSON())); var $container = $('#result_content'); $container.append($output) $container.masonry('appended', $output); }, this); return this; } }); What I am trying to do is for every item in my results collection.... append it to my #result_content

问题 I have a backbone fetch view method that does this: var ResultsView = Backbone.View.extend({ template : _.template($("#result_template").html()), render : function() { this.collection.each(function(result) { var $output = $(this.template(result.toJSON())); var $container = $('#result_content'); $container.append($output) $container.masonry('appended', $output); }, this); return this; } }); What I am trying to do is for every item in my results collection.... append it to my #result_content

问题 I have tried this using both the files from the Masonry website, plus the masonry-rails gem, but am getting the same problem. Basically, when I resize the browser window, the boxes aren't moving to fit the new page size. Instead, I'm just getting scroll bars appearing in the browser. I know that the files are loading fine, and picking up the right selectors, because if I e.g. change the column width in the masonry() parameters, the boxes do appear in a different place when I load the page.

问题 I have this issue with PXU Photoset Extended not loading properly when I use Masonry for my Tumblr Theme. I know what causes it, I just sadly have no clue how to fix it. The only thing I found that reduced flickering while Masonry loaded, was to hide the container with CSS (display:none) and then unhide it when loading the Masonry script. It seems this had the odd side-effect of the PXU Photoset script not rendering images properly (they're mostly cut off and they jump into their real size

问题 I am currently following John Elder's book about building Pintinterest clone using Ruby on Rails.The problem is that Masonry Grid Layout works only when I refresh the page. When I click the link to the list of pins, everything goes to the left side. I tried to fix turbolinks, coffee script, application.js but I gave up after three days. This is my github: https://github.com/Gelin1984/Imager2018 This is my Heroku App: https://imager2018.herokuapp.com/ Coffee Script: $ -> $('#pins')

问题 I'm working on some stuff that involves a responsive masonry layout. I have a container that has a max-width of 960px but scales down with the browser. My grid items have a percentage-based width (100%, 66.666666etc%, 33.33333etc%). For some reason, when I pass a function to the columnWidth option, it always gives the container a height of 0. This is how I'm instantiating Masonry. $(window).load(function() { var $container; $container = $("#grid_container"); $container.masonry({ columnWidth:

问题 So how do I add or integrate infinite scrolling with my masonry fluid layout? I have already googled but don't understand.Here is what I got so far: /** * Base js functions */ $(document).ready(function(){ var $container = $('.container'); var gutter = 20; var min_width = 270; $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', gutterWidth: gutter, isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

问题 First time using jquery and im trying to get the basic masonry style to work, i've got the following code in my html... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <title>_Box</title> <link href="styles.css" rel="stylesheet" type="text/css"> <body> <script src="jquery.js"></script> <script src="masonry.js"></script> <script> $(window).ready(function() { $("#container").masonry({ itemSelector: '.item', columnWidth: 240,