Here is the fiddle:
https://jsfiddle.net/qdhw0o3a/2/
I can't understand why all the items are being displayed on top of each other? Does it have something to do with the settings? I am just using the standard settings (as far as I can tell) which should produce behaviour similar to the website.
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
Try initiating the isotope after the window loads:
$(window).on('load', function() {
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
});
Note: Also, be on the lookout for Images Lazy-Loading in case your '.grid-item' contains images. This might interfere with isotope and make the elements come on top of each other.
you need to give the img and max-height and max-width.
see the updated Fiddle
Related
I'm trying to change the Masonry number of columns with a script in jQuery. This scripts reduce the max-width of Masonry container to force show only one column. The Script works almost fine, because I need to make double click to get my changes done. ¿Is it possible to make it with only one click?
This is my script:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
$(document).ready(function() {
$('.button-one').on('click', function() {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
$('.grid').css({'max-width': '600px'});
});
});
I have a Codepen demo with all the files:
Demo
One possible way to do this:
$('.button-one').on('click', function() {
$('.grid').css({'max-width': '600px'})
.masonry('layout');
});
Demo. See, you don't need to reinitialize the whole plugin: just command it to relayout the existing items with existing rules, based on the new dimensions of a grid container.
The way it stands, the plugin is first called again (making all the calculations using the existing style of a container), and only after that you change max-width of a grid. The second click works ok, as dimensions are already changed.
Just change width before grid masonry)
$('.grid').css({'max-width': '600px'});
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
I am using Isotope with Masonry layout and I noticed that sometimes leave the gaps between a box and the other (also if there is space to fit the other box).
but sometimes, if I refresh the page, it is ok and it fill all the gaps. (for this reason I don't think it is a problem of css)
I use fluid dimensions for the items and I have the sortBy: random mode.
I found that there is another script isotope-perfectmasonry, but it seems that works only with the old version of masonry (v1)
this is my code
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope after all images have loaded
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
sortBy : 'random',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
});
Is it possible fill all the gaps or it is impossible because it is random?
any idea how can i trigger a relayout if there are some gaps?
To avoid gaps, you should you use the packery layout mode of Isotope.
Here is a codepen demonstrating this.
The only differences are that the external javascript file for the packery layout is added (https://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js) and that the Isotope code is altered to what is below.
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
sortBy: 'random',
percentPosition: true,
packery: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
As you can notice in the picture Chrome is sizing the height of the selected div to 55px. This is element.style which I think is calculated by a script and inserted into the html. 55px is not correct because it is cutting off the images so I want to make it 305px. The weird thing is, is that this ONLY happens in Chrome and works on IE and Firefox. Plus it doesn't happen when I am working on the html page locally in Chrome on my computer. I tried to override the 55px CSS rule by using !important but this doesn't do anything. I cleared my browser cache/cookies and re-uploaded the files but nothing. Chrome seems to correct itself and display is correctly when you make the browser window small then full screen again. Any help is appreciated.
In the /js/main.js file
Change this code:
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
masonry: {
columnWidth: $container.width() / $resize
}
});
To:
$container.imagesLoaded( function() {
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
masonry: {
columnWidth: $container.width() / $resize
}
});
});
This will hopefully make isotope wait for images to load.
EDIT: Imagesloaded is no longer included in the newest versions of isotope. You got an older version with Imagesloaded included, but if you were to upgrade to a newer version, you will have to use this one: http://imagesloaded.desandro.com/
DEMO
FULL Screen DEMO
Masonry is not filling small gaps even if there is space.
Example :
Main Container width : 896px;
beside the first container with the orange background, there is a gap where Masonry could add one more container (Orange BG 2nd container), which is not happening. I'm not sure where I'm wrong. :-(
You need to maximize the window to see the issue.
JS :
jQuery(window).load(function() {
/* var container = document.querySelector('.masonry-container');
var msnry = new Masonry(container, {
itemSelector: '.itemMas',
columnWidth: 15,
gutter: 1,
isFitWidth: true
});
*/
$ = jQuery;
var $container = $('.masonry-container').masonry();
var msnry;
$container.imagesLoaded( function(){
msnry = new Masonry( $container[0], {
itemSelector : '.itemMas',
isAnimated: true,
isFitWidth: true
});
})
});
Masonry will not change the order of the elements in the document. It simply packs elements left-to-right as tightly as it can.
If you need to pack items by rearranging their layout, you want to use another library, such as Isotope (made by the same author). It features a bin-packing mode in which items can be rearranged to fit gaps.
Thanks for reporting this issue. This is how Masonry works. It may leave gaps. You should look at Packery, which was specifically designed to fill gaps.
We can't figure our why there are large extra spaces in the Work section layout. Can anyone help?
http://new-had.herrmanneasyeditdemo.com/#work
To fix the loading issue with your div's showing before your images, you need to load your images using imagesLoaded. This prevents just the div's from showing before isotope is called. Since you are using isotope v1.56, not v2, it is included in that version of isotope. Change your custom.js (at line 107) isotope call to this:
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
resizable: false,
itemSelector : ".item",
masonry : {
columnWidth : 1,
gutterWidth: 1,
}
});
});
To fix your layout issue is more complicated since I'm not sure you can fit all your images in a seamless grid using isotope v1.56 and masonry ( most often you need to rearrange them for sizes to fit without white space). You would need to update to isotope v2 and load the packery layout option after isotope and then set your code up as so, for them to fit together.
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
layoutMode: 'packery',
itemSelector: '.item'
});
});
You will also have to change line 349:
$(window).resize(function(){
$('#portfolio-container').isotope('layout');
});