- Add jquery components <script src= "//cdn.bootcss.com/jquery/2.2.1/jquery.min.js" ></script>
- Add Masonry components <script src= "Https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js" ></script>
- Insert <div class= "grid" id= "Grid" >
<div class= "Grid-item" >
</div>
???? </div>
- Initializing components
var $grid = $ ('. Grid '). Masonry ({
???????? Itemselector: '. Grid-item ',
???????? columnwidth:228,
????});
???? $grid. Masonry (' layout ');
?
- Dynamic loading
function Loading() {
???? $.ajax ({
???????? URL: "images.html",
???????? Cache: false,
???????? Async: True,
???????? /*datatype:html,
???????? global:true,*/
???????? success: function(html) {
???????????? // Hide Load dynamic icon
???????????? //hideloading ();
?
???????????? var $grid = $ ('. Grid '). Masonry ({
???????????????? Itemselector: '. Grid-item ',
???????????????? ColumnWidth: 228,
????????????});
?
???????????? var $items = $ (HTML). Find ('. Grid-item ');
???????????? $grid. Append ($items)
???????????????? //Add and lay out newly appended items
???????????????? . Masonry (' appended ', $items);
????????}
????});
}
?
Jquery+masonry realization of waterfall flow