Develop Reference

Centering elements in isotope

Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. To see what I mean by centering, please see the images below. I've managed to center the whole Isotope to the screen but I need the elements to be centered too and not just float to the left side.
Let's start with my script code:
<script>
$(document).ready(function(e) {
$(".ullist li").addClass('element-item');
});
</script>
<script>
$(document).ready(function(e) {
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
//layoutMode: 'fitRows',
});
//$('.grid').isotope({ layoutMode : 'fitRows' });
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'a', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.secmenu ul a').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'a', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});});
</script>
<script>
$(function(){
var $container = $('.grid'),
$body = $('body'),
colW = 20,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW,
isFitWidth: true
}
});
$(window).smartresize(function(){
// check if columns has changed
var currentColumns = Math.floor( ( $body.width() -10 ) / colW );
if ( currentColumns !== columns ) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width( columns * colW )
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
});
</script>
Basic HTML structure:
<ul class="ullist grid">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
Isotope works pretty well with no issues (so far). This is my current layout:
And this is the desired layout.
I even checked here and tried to use David DeSandro's repository but with no success. So please guys can you help me here to achieve the layout above?
Thank you all in advance.
jQuery isotope centering

You might need to add some extra markup and increase the number of columns that Isotope is fitting items into.
<ul class="ullist grid">
<li><span class="box">...</span></li>
<li><span class="box">...</span></li>
<li><span class="box">...</span></li>
<li><span class="box">...</span></li>
</ul>
You'll then set the number of columns to something that is divisible by both 2 and 3. If you create 6, you can have the first 6 li items span two columns, and the final two span 3:
Then, use CSS to position your .boxes within the li items.
This gets tricky if you don't know how many 'stray' items you'll have at the end - you might need to use javascript to figure this out, append a class (such as .span-2, .span-3, .span-6

The best solution for this is using the flex-box if you not concerned to support for old browsers(below IE8). Check this pen for flex-box solution codepen Link.
ul {
width: 600px;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
li {
width: calc((100% / 3) - 60px);
height: 200px;
background-color: #d91c5c;
margin: 30px;
}`

Animation on page load with masonryjs

I cant figure out how to have the initial fadein animation when masonry is initialized at first page load exactly like the original plugin's page:
http://masonry.desandro.com/
Any help suggestions?

I used the imagesLoaded progress deferred API and Masonry's appended method.
$('#load-images').click( function() {
var $items = getItems();
// hide by default
$items.hide();
// append to container
$container.append( $items );
$items.imagesLoaded().progress( function( imgLoad, image ) {
// get item
// image is imagesLoaded class, not <img>, <img> is image.img
var $item = $( image.img ).parents('.item');
// un-hide item
$item.show();
// masonry does its thing
$container.masonry( 'appended', $item );
});
});
Items are first hidden, then appended to the container. After each item is loaded, it un-hidden then gets revealed by Masonry.
Source: http://codepen.io/desandro/pen/iHevA

Masonry not working using ajax and infinite scroll

Currently I'm using AJAX to pull in data from our webservice. The issue I'm having is that it doesn't want to load the data into the masonry layout, everything in .social_block floats left one under the next (and I haven't set any float for these). So masonry isn't working :(
I wanted the following to happen: Load initial items from webservice in the masonry layout and on "infinite" scroll it would make the paged request from the webservice to append new items into the masonry layout.
So the questions are as follows:
- Why aren't my webservice items loading using masonry and just loading to the left of page?
- How can I use infinite scroll with my existing AJAX request so it pulls in new data into the masonry layout using the paging code I have in place as (first request load http://example.com/ automatically, second request load http://example.com/1 on first infinite scroll, third request http://example.com/2 on second infinite scroll, etc.)?
As an added note, if I add in an alert rather than console.log before line $container.imagesLoaded(function(){ it seems to slow things down but then loads the initial request into masonry format - weird!
<div id="container">
</div>
<p id="loadmore">
<button id="more">'Load More!</button>
</p>
<script src="js/vendors/jquery/jquery-1.10.0.min.js"></script>
<script src="js/vendors/masonry/jquery.masonry.min.js"></script>
<script src="js/vendors/jquery/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $container = $('#container');
//alert('Masonry loads items in the nice layout if I do this');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.block',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#loadmore', // selector for the paged navigation
nextSelector : '#more', // selector for the NEXT link (to receive next results)
itemSelector : '.block', // selector for all items to retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
// set here so it is in reach
var page = 0;
// this will call the required url with new json data.
function loadPage(page) {
var url = 'http://example.com/' + page;
$.getJSON(url, function(data) {
var cont = $('#container');
$.each(data.data, function(index, obj) {
var item = obj.Message;
cont.append(
$('<li>', {"class": "block"}).append(
$('<span>', {"class": item.Type}).append(
$('<span>', {"class":"post_image"}).append(
$('<img>', {src:item.postImageLarge})
)
)
)
)
)
});
//$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)});
});
}
// load more handler
$('#more').click(function(){
page = page + 1;
loadPage(page); //load more items
});
// initial run with page empty
loadPage('');
});
</script>

jQuery Isotopewrapper: possible to resize all isotopeItems to same height (per row)?

I have a website that is using jquery's isotope wrapper with html code like this:
<div class="isotopeWrapper clearfix isotope">
<article class="col-sm-4 isotopeItem isotope-item">
<!-- item1 --->
</article>
<article class="col-sm-4 isotopeItem isotope-item">
<!-- item2 --->
</article>
<!-- ... unknown amount of items with unknown height -->
</div>
The template I am using is using this javascript code to initialize the isotope-stuff:
if($('.isotopeWrapper').length){
var $container = $('.isotopeWrapper');
var $resize = $('.isotopeWrapper').attr('id');
// initialize isotope
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
masonry: {
columnWidth: $container.width() / $resize
}
});
var rightHeight = $('#works').height();
$('#filter a').click(function(){
$('#works').height(rightHeight);
$('#filter a').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 1000,
easing: 'easeOutQuart',
queue: false
}
});
return false;
});
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: {
columnWidth: $container.width() / $resize
}
});
});
}
This leads to a "masonary" kind of arrangement where the rows have different position absolute top-positions. However, this is unwanted and the content elements have an unknown height (depending on user input).
I am not really familiar with this isotope/masonary type of content and got the following question: how can I give all article.isotopeItem elements the same height (or atleast make each row have an upper solid line ? There is no dynamic adding/deleting of elements in my case, as this is all done on server-side with complete page reloads.

I assume this is the plugin: http://isotope.metafizzy.co
So just use fitRows and the tops of each row will line up - http://isotope.metafizzy.co/layout-modes/fitrows.html
So:
// initialize isotope
$container.isotope({
itemSelector: '.isotopeItem',
resizable: false, // disable normal resizing
layoutMode: 'fitRows'
});

How to setup infinite scrolling with masonry?

I recently ran into some problems trying to setup Infinite scroll on my tumblr with masonry. I found some code, and it worked perfectly on the demo website: http://www.jquery4u.com/demos/infinite-scrolling-demo1/ But on my tumblr only the Masonry part works, but not the infinite scrolling part. Here is my Javascript:
<script>
$(function(){
var $container = $('SECTION');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: '.item',
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#nextPage', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
msnry.appended( $newElems );
});
}
);
});
</script>
Here is the html for the next Page link:
{block:Pagination}
<nav id="page-nav">
{block:NextPage}
<a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
{/block:NextPage}
</nav>
{/block:Pagination}
I do already have the Masonry, ImageLoaded, and Infinite Scrolling scripts linked. As I said, The masonry works fine, but the infinite scroll seems to be doing nothing at all. The next link is also working too, since I tested it and it does take me to the next page. But again the Infinite scrolling does nothing whatsoever. If anyone could help it would be very appreciated, or if you have any other suggestions or alternatives, that would also be nice.

Its hard to tell without a demo link, but looking at the example you used for reference:
msnry.appended( $newElems );
There should throw an error saying undefined. This is due to msnry.appended.
The line should be:
$container.masonry( 'appended', $newElems, true );
Source: http://www.jquery4u.com/demos/infinite-scrolling-demo1/