After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle.
This is the HTML code I am using:
<div class="container">
<div id="items">
<!-- the .box repeats several times -->
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
</div>
This is the javascript code used:
$(document).ready(function(){
var $container = $('#items');
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
Here is the CSS:
.box { margin: 5px; width: 214px; }
.box img { width: 100%; }
.panel .panel-heading {
color: #ffffff;
text-align: center;
margin-right: 0;
height: 150px
}
-------------------- Update ---------------------
The code above is just a simplified version of my webpage. In an earlier version of the fiddle (http://jsfiddle.net/shapeare/saonpswu/), I mistakenly placed .box inside a separate #items, which caused it not to work. This mistake was pointed out by @Skelly. Thanks, Skelly. Now the fiddle works for the demo (http://jsfiddle.net/shapeare/saonpswu/1), however, my actual webpage is still facing issues. I have recreated the same content as my webpage in this fiddle: