Masonry question

JavaScript
1

What does this mean?

jQuery

jQuery is not required to use Masonry. But if you do enjoy jQuery, Masonry works with it as a jQuery plugin.
var $container = $(‘#container’);
// initialize
$container.masonry({
columnWidth: 200,
itemSelector: ‘.item’
});

Get the Masonry instance with .data(‘masonry’).

var msnry = $container.data(‘masonry’);

I have added the

// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

to my separte .js file but don’t understand this part


var msnry = $container.data('masonry');

am I supposed to add it to the html? or css? not clear where the $container.data(‘masonry’);is supposed to be defined.
and when it comes to loading the images would it be ok to add benath the above code the

// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

bit?
thx
D

3

The var msnry = $container.data('masonry'); part is to get the JavaScript object that contains the Mansonry Instance. If you’re not manipulating it with JavaScript in some other place with custom code, don’t worry about it.

4

thx mawburn. But when i only use this code

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

var $container = $('#container');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

it doenst’ work

5

What does your html look like?
Do you have a <div id="container"></div> with <div class="item"></div> elements inside of it?

IE:

<div id="container">
  <div class="item">Stuff 1</div>
  <div class="item">Stuff 2</div>
</div>

Is the script being loaded at the bottom of the page?

6

Yes, for example…
this is working


var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 10,
  itemSelector: '.item'
});



$(document).ready(function(){
  $("#hide").click(function(){
    $("p").css("display","none");
  });
  $("#show").click(function(){
    $("p").css("display","block");
  });
});

& the html is

  <div id="container">

	<div id="one" class="item">
	<button id="hide">Hide</button>
	<button id="show">Show</button>
	<h2>Play riveting </h2><p>Play riveting piece on synthesizer keyboard sleep in the bathroom sink loves cheeseburgers shove bum in owner's face like camera lens nap all day. Use lap as chair hack up furballs so attack feet. Hopped up on catnip chase mice swat at dog. Swat at dog hate dog intently stare at the same spot meow all night having their mate disturbing sleeping humans and leave hair everywhere, or rub face on everything, but if it fits, i sits. All of a sudden cat goes crazy intently sniff hand. Chew on cable mark territory, or present belly, scratch hand when stroked</p> </div>
	<div id="two" class="item two"><h2>everything stretch purr</h2><p>I like big cats and i can not lie chase dog then run away, yet hack up furballs make muffins, but destroy couch. Chase mice shove bum in owner's face like camera lens. Eat grass, throw it back up scamper for behind the couch, and use lap as chair find something else more interesting leave hair everywhere, and jump off balcony, onto stranger's head.</p></div>

although i was hoping that by setting the display to none w/jquery the divs would realign and adjust to the extra space. they do not.& i have have ten div.

7

Use:

$container.masonry( 'remove', elements );
8

thank you just found this as well.
http://codepen.io/desandro/pen/xmjId
was still wondering why the jquery i tried using wouldn’t load?
thx
C

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.