Не рендеринг кладки

0

Я пытаюсь построить страницу каменной кладки с некоторыми изображениями. вот мой код

CSS

    <style>
       .masonryImage{float:left;}
    </style>

JavaScript

    <script src="/jquery-1.10.1.min.js"></script> 
    <!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
    <script src="<?=base_url('masonry/masonry.min.js')?>"></script>
    <script src="<?=base_url('masonry/masonry.js')?>"></script>

    <script type="text/javascript">
      var container = $('#container');
      container.imagesLoaded( function(){
          container.masonry({
            itemSelector : '.masonryImage'
          });
      });

   </script>

HTML

  <body id="container" style="height:100%;width:100%;background-color:#309be9;">

        <div class="masonryImage">
            <img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
        </div>
        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
        </div>

        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
        </div>

        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
        </div>

        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
        </div>

        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
        </div>
        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
        </div>

        <div class="masonryImage">
            <img  src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
        </div>

        <div class="masonryImage">
            <img   src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
        </div>

    </body>

Я понимаю, где ошибка, страница не рендеринга в стиле mansory.

пожалуйста, предложите.

ОБНОВИТЬ:

Попробовав два предложенных javascripts, изображения начали перекрываться. На самом деле сам код не несет за это ответственности. Но что-то не так с кладкой. вот скриншот. Если вы четко заметите, что я выделен красной меткой, он показывает некоторые изображения и скрывается!

Изображение 174551

Ах, это играет со мной

Если я попытаюсь проверить элемент, изображения возвращаются в их положение Изображение 174551

Слишком озадачен

  • 0
    Прежде всего вы должны убедиться, что все кладочные файлы JavaScript были успешно включены. Есть ли ошибки в консоли? Также попробуйте переместить инициализацию JavaScript в обработчик событий document.ready ...
Теги:
jquery-masonry

2 ответа

1
Лучший ответ

Я не вижу инициализации Masonny в вашем коде:

$(document).ready(function (){
var $container = $('#container');
$container.masonry({
  columnWidth: 200,
  itemSelector: '.masonryImage'
});
})
Поделиться
1

Проверьте правильность вызова js.
Либо используйте masonry.min.js или masonry.js, что полезно использовать masonry.min.js, если вы развертываете.
Чтобы проверить правильность вызова js, просмотрите источник и откройте js-ссылку или разместите простое предупреждение внутри js.

EDIT: Кажется, вы используете изображения, которые не являются частью мансори, но могут использоваться с mansory. Если вы хотите начать кладку, вам нужно заменить свой код на

$( document ).ready(function() {
  $('#container').masonry({
  columnWidth: 200,
  itemSelector: '.item'
  });
});

или с вашим текущим кодом вы должны добавить imagesloaded.js

Поделиться
  • 0
    я проверил, что он звонит правильно, я имею в виду, я могу просмотреть js в элементе Inspect-> sources. Но не повезло
  • 0
    Хорошо, добавьте простое предупреждение в конце вашего js и проверьте, все ли еще работает. Если это все еще работает, дайте мне знать.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню