0

Доброй ночи. Уже несколько часов никак не могу завести masonry. Листинг и комментарии ниже.

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>

По подключению: Скрипты перед закр. тегом боди.

<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"
    });
});
});

Блоки нормально не встали.введите сюда описание изображения

1 ответ 1

0

Вы в настройках masonry пишете itemSelector: ".masonry-item", но в вашем коде это дочерние элементы для колонок. Попробуйте повесить masonry на один из классов: col-sm-100 col-md-49 output-box wow fadeIn.

6
  • пробовал, результата нет. Можно сказать, что даже хуже, ибо некоторые элементы сползли вообще.. 29 окт 2016 в 20:39
  • Вру, сползло из-за другого. Но решение не рабочее :( 29 окт 2016 в 20:40
  • Посмотрите тут masonry.desandro.com/extras.html#bootstrap.
    – Igor
    29 окт 2016 в 20:45
  • Тут тоже был... 29 окт 2016 в 21:09
  • Видимо у вас что-то конфликтует по стилям. Вот сильно упрощённый пример вашей вёрстки, и всё отлично работает codepen.io/desandro/pen/eJJEXd. Попробуйте выложить свой вариант, со своими стилями.
    – Igor
    29 окт 2016 в 21:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.