Goodnight. For several hours I can’t start a masonry. Listing and comments below.

div class="container-fluid"> <div class="masonry-container"> <?php foreach ($groupMembersInfo['response'] as $member) { $id = $member['id']; if($id == NULL) break; /*Переменные опустил*/ $randTime = mt_rand(3,9); if($member['online']) $online = "Online"; echo " <div class=\"col-sm-100 col-md-49 output-box wow fadeIn\" data-wow-delay=\"0.{$randTime}s\"> <div class=\"masonry-item\"> <div class=\"output-box-header\"> <p>{$firstName} {$lastName}</p> <p class=\"age\">{$bDate}</p> <p class=\"online\">{$online}</p> <hr> <img src=\"{$photo_200_orig}\" class=\"output-box-image\" width=\"250\" alt=\"\"> "; if($photo1) { echo " <img src=\"{$photo1}\" class=\"output-box-image \" width=\"250\" alt=\"\"> <img src=\"{$photo2}\" class=\"output-box-image \" width=\"250\" alt=\"\"> <img src=\"{$photo3}\" class=\"output-box-image \" width=\"250\" alt=\"\"> </div> </div> </div> "; } else { echo " </div> </div> </div> "; } } ?> </div>

By connection: Scripts before zakr. tag body

 <script src="js/jquery-3.1.1.min.js"></script> <script src="js/imagesloaded.min.js"></script> <script src="js/imagefill.js"></script> <script src="js/jquery.mosaicflow.min.js"></script> <script src="js/masonry.pkgd.min.js"></script> <script src="js/masonry-init.js"></script> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script>

masonry-init.js

 $(window).load(function() { var $container = $(".masonry-container"); $container.imagesLoaded(function () { $container.masonry({ columnWidth: ".masonry-item", itemSelector: ".masonry-item" }); }); });

The blocks did not normally stand up. enter image description here

    1 answer 1

    You write itemSelector: ".masonry-item" in masonry settings, but in your code these are child elements for columns. Try hanging masonry on one of the classes: col-sm-100 col-md-49 output-box wow fadeIn .

    • I tried, there is no result. It can be said that it is even worse, because some elements have slipped altogether .. - Ivan Blohin
    • Lying, slipped because of another. But the decision is not working :( - Ivan Blohin
    • Look here for masonry.desandro.com/extras.html#bootstrap . - I. Kyrkalov
    • I was here too ... - Ivan Blohin
    • Apparently you have something in conflict with styles. Here is a very simplified example of your layout, and everything works fine codepen.io/desandro/pen/eJJEXd . Try to lay out your version with your styles. - I. Kyrkalov