jquery-isotope

问题 I'm working on a jQuery Isotope implementation but the animation only seems to 'wake-up' once the browser is resized both on laptop and mobile. Perhaps my ordering is wrong? Here's the site that I'm working on: http://rgbdrinks.squarespace.com/ If you are able to work out why the mobile implementation isn't great that would be awesome too but I realise that is probably a world of pain to get into. Many many thanks for your help in advance, Andrew Here's the code: <div id="container"> <div

问题 I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below: $(document).ready(function() { var $container = $container.packery({ itemSelector: "packery-item" }); $container.imagesLoaded( function() { container.packery(); }); }); Any help would be greatly appreciated. EDIT: The html code looks like this: <div class="packery js-packery"> <div class="packery-item item"><img src="imgs/cdg5.jpg"><

问题 I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below: $(document).ready(function() { var $container = $container.packery({ itemSelector: "packery-item" }); $container.imagesLoaded( function() { container.packery(); }); }); Any help would be greatly appreciated. EDIT: The html code looks like this: <div class="packery js-packery"> <div class="packery-item item"><img src="imgs/cdg5.jpg"><

问题 I'm using the latest Isotope (v2) and it seems the Hash History no longer works from V1. I would like to be able to link to a certain filter from another page. For example I'm on 'about.html' which contains a link to 'support.html#filtertype'. This is my current setup. HTML: <ul id="filters" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1"> <li><a data-filter="*">All</a></li> <li><a data-filter=".chocolate">Chocolate</a></li> <li><a data-filter=".sweets">Sweets</a><

问题 This is a continuation from my other question regarding Changing media screen makes div overlay This problem is associated with Isotope. With help from @Robin Carlo Catacutan I have the following isotope.js: jQuery(function($) { var $container = $('#isotope-list'); //The ID for the list with all the blog posts $container.isotope({ //Isotope options, 'item' matches the class in the PHP itemSelector: '.item', layoutMode: 'masonry' }); // Add class when transition is finished $container.on(

问题 I've noticed that when using jQuery Isotope or Masonry with a fluid / responsive website, the elements overlap momentarily whilst the browser window is being resized. Please see the images below, which are screenshots from this demo. You can also see this happening on the Isotope website. Is there anything that can be done to avoid this overlapping? 回答1: For Isotope version 3 use: $(window).resize(function(){ $('.grid').isotope('layout'); }); to avoid overlapping grid items. 回答2: Thanks to

问题 Following the advice of several S.O. members, I have decided to try to use Jquery Isotope on a webpage. I am also using Bootstrap 3, and have been having trouble getting a thumbnail gallery (with different-sized landscape/portrait orientation images) looking nice. I am using the Bootstrap 3 .thumbnail class to resize the images to fit within the responsive columns. Everything works great until I apply Isotope to these thumbnail divs. I really don't know what is going on, but I have spent

问题 I'm a newbie to posting on stackoverflow, and also using Codepen; so please go gentle with me! After finding the wonderful Masonry by David DeSandro, I then found the amazing Isotope. I've been trying to accomplish what (I believe) should be the very simple task of maintaining the original order of items. After tearing my hair out for days (and also trying Vit ‘tasuki’ Brunner's Masonry Ordered) -I've obviously got something wrong with my syntax and would appreciate any help, please.

问题 I am using isotope to build a smooth grid gallery. Currently I am having issues with the append feature: http://isotope.metafizzy.co/docs/methods.html#appended If I call the append like this $('#loadMore').click(function(){ val='<div class="content-box masonry-brick img11"><a href="#"><img src="images/1.jpg" style="width: 290px; height: 163.36666666666667px; "><div class="portfolio-more"><div class="portfolio-icon"></div></div></a><div class="content-box-content"><h3 class="post-info"

问题 I'm trying to get a home page that has a bunch of content under Isotope to show each hash change as a pageview in Google Analytics. Originally, I was going to do this as events, but it really should be pageviews. So I setup the modified GA: (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,