Masonry - вывод блоков в виде кирпичной кладки
Не могу понять почему все блоки выводятся вертикально (а не кирпичной кладкой-горизонтально), хотя размеры все заданы. Помогите, пожалуйста:help:
Если смотреть более объективно, то весь код выглядит так:
<!DOCTYPE html>
<HTML>
<head>
<title> E</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php include("2.php"); ?>
<script src="/js/masonry.pkgd.min.js"></script>
</head>
<style>
.item img {
width: 300px;
height: 200px;
}
</style>
<body>
<?php
$Ho = get_Ho ();
foreach($Ho as $it) : ?>
<div id="container" class="container">
<div class="item">
<a href="#"><img src="<?= $it['images']?>" /></a>
</div>
</div>
<?php endforeach;?>
[JS]
<script type="text/javascript">
var container = document.querySelector("#container");
var msnry = new Masonry(container, {
columnWidth: 300,
itemSelector: ".item",
gutter: 15
});
</script>
[/JS]
</body>
</html>
|
Шалун,
может живой пример? |
Если вы по поводу того, как это все выглядит, то картинки просто выстраиваются друг за другом в вертикальном положении, хотя все должно быть выстроено по горизонтали. ( Все картинки берутся из бд)
|
Шалун,
ок, ждите телепатов. |
Потому, что каждое изображение будет помещено в отдельный контейнер с одинаковым id, что уже ошибка. А должно быть:
<div id="container" class="container"> цикл для <div class="item"> конец цикла </div> |
laimas,
Огромное спасибо! Помогли!!!:) |
laimas,
А не могли бы Вы подсказать, почему Masonry не отодвигается от левого края или же перекрывает слева стоящий от него блок? В css многое, что перепробовала, но все безрезультатно |
Цитата:
Цитата:
Цитата:
|
Шалун,
в общем все о плагине рассказано здесь. Если не получается, значит ваш косяк, а какой сказать без кода невозможно. |
laimas,
Спасибо Вам)))Выручили))):) |
| Часовой пояс GMT +3, время: 12:33. |