I'm using the masonry script for one of my webpages.
This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
This is working very good.
But now I need to shuffle the items before they are rendered and displayed my masonry. Is this somehow possible?
I tried to use Isotope and looked at packery but both doesn't worked out at my website.
Thank you for every help!
shuffle the items before they are rendered and displayed
Do the items have any JavaScript event listeners assigned to them.
If not (meaning if the 'container' only contains markup and no script dependency) then I would suggest:
creating an array that stores the markup of each individual masonry-item as HTML string.
Shuffle the array and
dump the array contents into the 'container'
A crude solution for sure. But, hope this gets the job done.
Related
I am trying to filter a grid view in JavaScript with jQuery Isotope, it works fine if I click control F5, or I have my developer tools open, but when I just go to the url in a normal way, or refresh the page, it doesn't work.
Here's my code:
$(window).load(function(){
var dataFilters = [];
dataFilters = getdataFilters();
//dataFilters now has the value of = [".val1",".val2"]
$('#grid').isotope({ filter: dataFilters.join(', ') });
});
The reason I am using window.load is that I am waiting for all images to be loaded, then I filter them.
It's precisely because you're using window.load that you are only able to filter when refreshing the page, since the filter functionality is only declared there.
If you want to initialize isotope only when all of your images have loaded, you can use the imagesloaded library (by the same developer) in conjunction with isotope.
http://isotope.metafizzy.co/layout.html#imagesloaded
Sample code from the documentation:
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope after all images have loaded
$grid.isotope({
// options...
});
});
I'm using jquery masonry in my project, where i need to make layout with filter such as category1, category2, category3 and all. And also need the ajax load more option for add more elements in the layout.
All is done means ajax is working good with the db and masonry layout. But the filter is not working with ajax (Filter is working without ajax). I'm using here another script which is founded on github here the link know as multiple-filter-masonry
Here's my js code...
// Start Masonry
var $container = $('.posts.load-more').multipleFilterMasonry({
// columnWidth: 150,
itemSelector: '.post',
filtersGroupSelector:'.filters',
isAnimated: true
// gutter: 20,
// isFitWidth: true
});
// Get some more blocks
$('#more').click(function(){
// $('.loader').show();
$start = $('.posts.load-more .post').length;
$end = 6;
$.post('blocks.php', {start: +$start, end: +$end}, function(data){
// $('.loader').hide();
// make jQuery object
var $moreBlocks = $( data );
// Append new blocks
$container.append( $moreBlocks );
// Have Masonry position new blocks
$container.masonry( 'appended', $moreBlocks );
});
Hope someone having the solution for that... or suggest me any idea to complete this.
Thanks in advance
I'm a js newbie and hope this questions doesn't seem too stupid.
I'm using masonry for my site - works fine.
I wanted to let my boxes appear just when masonry finished loading. Searching in the internet I found several posts recommending to use imagesloaded Plugin to solve this issue. It just doesn't change anything. That means: my layout and content boxes keep being messed up until masonry finished loading, just then the boxes suddenly jump to their right positions.
My code:
$(document).ready(function() {
var $container = $('#post-area');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.box',
columnwidth: 300,
gutter: 20,
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
});
});
});
I'm also getting this firebug-error:
TypeError: EventEmitter is not a constructor
ImagesLoaded.prototype = new EventEmitter();
I'm loading the imagesloaded js like this at the end of my website (I couldn't find any information if imagesloaded is already included in masonry or not, some wrote that it's not included anymore - confusing):
<script src="http://www.domainname.com/js/imagesloaded.js"></script>
I would be really happy if someone could help me. And tell me if imagesloaded is even the right plugin to solve this issue!
imagesLoaded is not included in Masonry, so you should use separate plugin. I would recommend to use compiled .min version.
Regarding your problem with stacked images: the problem is not in imagesLoaded neither Masonry.
In your code imagesLoaded is waiting until all images loaded and then fires masonry. Having all images loaded, Masonry plugin can properly define their sizes and put on grid. Before that, browser loads images as usually and display 'em according to defined CSS, that's why they're messed up.
One of the possible solution is to hide elements by default and then fadein while imagesLoaded confirm, that images loaded:
$(document).ready(function() {
var $boxes = $('.box');
$boxes.hide();
var $container = $('#post-area');
$container.imagesLoaded( function() {
$boxes.fadeIn();
$container.masonry({
itemSelector : '.box',
columnwidth: 300,
gutter: 20,
isFitWidth: true,
isAnimated: !Modernizr.csstransitions
});
});
});
Another solution is to initialize Masonry inside $(window).load() instead of $(document).ready(). This will trigger Masonry after all the media on the page has loaded – images, fonts, external scripts and stylesheets, etc.
$(window).load(function(){
$('#container').masonry({
// options...
});
});
Install
npm install masonry-layout --save
npm install imagesloaded --save
Then vanilla js options would be
'use strict'
const Masonry = require('masonry-layout')
const imgloaded = require('imagesloaded')
const elem = document.querySelector('.grid')
var imgLoad = imgloaded( elem )
function onAlways() {
const msnry = new Masonry( elem, {
// options
columnWidth: '.grid-sizer',
// do not use .grid-sizer in layout
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10
})
// console.log('all images are loaded')
}
if (elem) {
// bind with .on()
imgLoad.on( 'always', onAlways )
// unbind with .off()
// imgLoad.off( 'always', onAlways )
}
Then check the console for all images are loaded.
I'm implementing Masonry with Infinite Scroll on a Tumblr theme -- something I've successfully done before, but I just can't get this one to stop "breaking" and scattering the images around. Getting desperate!
Live demo at neuraldamage-theme4.tumblr.com (password is guest).
I've tried removing everything from the body tag except for the #posts div and its contents (and of course the script), but the problem persisted -- so it seems like this shouldn't be an issue with the surrounding divs.
Here's my script:
$(document).ready(function() {
$('#post-video iframe').attr('width', '300'); // resize embedded videos
});
var $container = $('#posts');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post',
columnWidth : 300
});
});
$container.infinitescroll({
navSelector : '#pagination', // selector for the paged navigation
nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loading: {
finishedMsg: '',
img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif', // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
}
);
And here's what I have embedded, just made sure it was all up to date:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script>
And if you'd like to see the full code: gist.github.com/neuraldamage/5307289
If anyone could take a crack at this, I'd be greatly appreciative!
It's running into a bunch of problems because you actually have multiple <div id="posts"> on the page. Likely a problem with your Tumblr code spitting out more than it should.
The issue is this:
<div id="posts" style="position: relative; height: 483px;" class="masonry">
change that height to accommodate your content (as it's not large enough), or simply don't declare it at all.
When I inspected the element, I simply removed the height value and everything moved into place.
I implanted Isotope jquery plugin successfully but for some reason I get problem showing all the items when the page is loaded first time and it's only on Chrome.
You can see here what is happening http://dl.dropbox.com/u/15358757/sd.jpg, that elements are on top of each other. but when I press on PSDs and then back to All it shows properly.
I don't have a default height for the container because I want to to be dynamic.
Any idea how I can fix this?
The problem is probably that Isotope is doing its thing before the images are loaded.
http://isotope.metafizzy.co/demos/images.html
[In this demo] Isotope is triggered after all images are loaded with the imagesLoaded
plugin.
http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
var $container = $('#container');
$container.imagesLoaded(function() {
$container.isotope({
// options...
});
});