I've recently started using masonry for the first time and you can check it out here:
Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in.
For example, instead of placing a medium-sized object on the top line followed by two small objects together on the next line, and another medium-sized object at the bottom, it seems to keep the order unchanged which defeats the purpose of using masonry.
You can see this behavior in action in this fiddle: http://jsfiddle.net/danwhitmarsh/zgjBy/
To understand better, adjust the bar between the result and javascript section to see the issue more clearly.
Here is an example of the code:
html
<main id="main" class="js-masonry" data-masonry-options='{ "columnWidth": 320, "itemSelector": ".module","isFitWidth": true }'>
<!-- INTRO MODULE -->
<div class="module med-width med-height">
</div>
<!--EXAMPLE OF SMALL SMALL MODULE-->
<div class="module sml-width sml-height">
</div>
<!--EXAMPLE OF MEDIUM SMALL MODULE -->
<div class="module med-width sml-height">
</div>
<!--EXAMPLE OF SMALL SMALL MODULE-->
<div class="module sml-width sml-height">
</div>
</main>
and here is some css
* {
padding:0px;
margin:0px;
font-family: Arial;
}
#main{
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.sml-width {
width: 320px;
background-color:#ccc;
}
.med-width {
width: 640px;
background-color:#000;
}
.sml-height {
height: 320px;
background-color:#ccc;
}
.med-height {
height: 640px;
background-color:#000;
}
Can anyone guide me if I'm overlooking a specific setting that may help resolve this issue?