JS масонский не работает

Question

JS масонский не работает

0

Я пытаюсь заставить Masonary работать на странице, и до сих пор не повезло. Я пробовал следовать учебнику, но даже когда я копирую все в jsFiddle, он не работает. Есть что-то глупое, что я здесь отсутствует? http://jsfiddle.net/gZ77r/

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".masonryImage" }'>
    <div class="masonryImage">
        <img src="http://topknot.ca/wp/wp-content/uploads/2013/10/kitten.jpg" alt="">
    </div>.....

'

ColoursB 09 окт. 2013, в 23:47

Источник

0

что вы хотите сделать именно со всеми этими фотографиями и masonry.js? masonry.js не является слайдером. tyler-designs.com/masonry-ui
user2858726 09 окт. 2013, в 21:11
0

Я хочу, чтобы изображения отображались в виде designshack.net/tutorialexamples/masonry/demos/masonry.html
ColoursB 09 окт. 2013, в 21:34

Теги:

jquery

jquery-masonry

2 ответа

0

Использование масонства с изображениями требует использования плагина imagesLoaded, поскольку масонство не может знать высоту div без изображения в загружаемом div.

Ознакомьтесь с приложением для получения информации об этом: http://masonry.desandro.com/appendix.html

Добавьте загруженные изображения плагина и попробуйте создать экземпляр кладки через JS.

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 200,
  itemSelector: '.masonryImage'
});
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
  msnry.layout();
});

zungaphobia 09 окт. 2013, в 19:05

0

Спасибо зунгафобия, до сих пор не повезло
ColoursB 09 окт. 2013, в 21:33

Ещё вопросы

что вы хотите сделать именно со всеми этими фотографиями и masonry.js? masonry.js не является слайдером. tyler-designs.com/masonry-ui
Я хочу, чтобы изображения отображались в виде designshack.net/tutorialexamples/masonry/demos/masonry.html
Спасибо зунгафобия, до сих пор не повезло

user2858726 · Accepted Answer · 2013-10-09T18-42-00.000Z

Я попробовал ваши фотографии в этом примере, пришел к выводу, что ваши размеры изображения слишком велики для использования masonry.js. пожалуйста, проверьте:

http://jsfiddle.net/w4WrP/