Bootstrap+masonry.js Write Waterfall Stream

Recently in the use of bootstrap to write a website, which has a graphic display of the page to use the effect of waterfall flow.
Because the project requirements, the project to bootstrap as the benchmark, not allowed to add inline style, internal style, so that their own writing waterfall flow is not, so, according to the requirements, Baidu find relevant information, see Masonry.js.
Personally think this is a very useful waterfall stream plugin.
The following is the problem I encountered in the process of quoting, at first I used the bootstrap grid system layout, the code is as follows

<div class= "Row Masonry" >

<div class= "col-xs-12 col-sm-6 col-md-6 Item" >
<div class= "thumbnail" >
Graphic display
</div>
</div>

<div class= "col-xs-12 col-sm-6 col-md-6 Item" >
<div class= "thumbnail" >
<div>
Graphic display
</div>
</div>

.......... (Omit n multi-graphic display)

</div>


Introduction of Masonry.js

<script type= "Text/javascript" src= "Js/jquery-1.9.1.min.js" ></script>
<script type= "Text/javascript" src= "Js/bootstrap.min.js" ></script>
<script type= "Text/javascript" src= "Js/masonry.pkgd.min.js" ></script>
<!--waterfall Flow--
<script>
$ ('. Masonry '). Masonry ({
Itemselector: '. Item '
});
</script>

This thought there would be a satisfactory result, but, never thought, never thought, graphic display confusion, overlap. I can't be here, it's too slag.
Later against the Masonry.js related documents to see a bit, just know, but also to introduce imagesloaded.js.
Because the picture does not load, it will affect its layout, resulting in a waterfall flow layout error. That's what I understand. If the understanding is wrong, you have to spit on me.
So, finally, we introduce imagesloaded.js

<script type= "Text/javascript" src= "Js/imagesloaded.pkgd.min.js" ></script>

The final adjustment code is:

<script type= "Text/javascript" src= "Js/jquery-1.9.1.min.js" ></script>
<script type= "Text/javascript" src= "Js/bootstrap.min.js" ></script>
<script type= "Text/javascript" src= "Js/masonry.pkgd.min.js" ></script>
<script type= "Text/javascript" src= "Js/imagesloaded.pkgd.min.js" ></script>
<!--waterfall Flow--
<script>
<span style= "White-space:pre" > </span>$ ('. Masonry '). imagesloaded (function () {
$ ('. Masonry '). Masonry ({
Itemselector: '. Item '
});
});
</script>

Finally, the results are perfect.

Bootstrap+masonry.js Write Waterfall Stream