Masonry - выравнивание всех блоков на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src='/js/masonry.pkgd.min.js'></script> <script> $(function() { $('#apom').masonry({ itemSelector: '.apodiv', // К каким элементам применить эффект columnWidth: 200, // Ширина столбцов percentPosition: false, // Высчитывать ширину в процентах gutter: 10, // Расстояние между блоками fitWidth: true, // Подстраивать ширину originLeft: true, // Выравнивать по левому краю originTop: true // Выравнивать по верху }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 |
<div id="apom"> <div class="apodiv apo1"></div> <div class="apodiv apo2"></div> <div class="apodiv apo3"></div> <div class="apodiv apo4"></div> <div class="apodiv apo5"></div> <div class="apodiv apo6"></div> <div class="apodiv apo7"></div> <div class="apodiv apo8"></div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
#apom div { margin: 10px; } .apo1 { width: 300px; height: 400px; background: #aaa; } .apo2 { width: 200px; height: 140px; background: #a3a; } .apo3 { width: 100px; height: 400px; background: #33a; } .apo4 { width: 400px; height: 150px; background: #a55; } .apo5 { width: 400px; height: 100px; background: #3a3; } .apo6 { width: 500px; height: 200px; background: #759; } .apo7 { width: 100px; height: 500px; background: #300; } .apo8 { width: 250px; height: 200px; background: #39f; } |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Не хочет в crome работать (
Как это не хочет? У меня всё прекрасно работает
вот так понятнее будет https://cloud.mail.ru/public/D2hB/PrMjhFK95
Выстави нужный margin-bottom для этих блоков или поиграйся со значениями параметра gutter
пробовал уже, тоже самое
Дай ссылку на свой сайт
вот http://quasar.by/load/poleznoe/prezentacii_po_astronomii_i_fizike/6-1-0-2
Это из-за того, что у тебя картинки после загрузки контента появляются. Задай им фиксированную высоту:
Спасибо, всё работает
Не за что