Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2017, 22:12
Интересующийся
Отправить личное сообщение для Шалун Посмотреть профиль Найти все сообщения от Шалун
 
Регистрация: 22.05.2017
Сообщений: 10

Masonry - вывод блоков в виде кирпичной кладки
Не могу понять почему все блоки выводятся вертикально (а не кирпичной кладкой-горизонтально), хотя размеры все заданы. Помогите, пожалуйста


Если смотреть более объективно, то весь код выглядит так:
<!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>
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2017, 22:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Шалун,
может живой пример?
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2017, 22:34
Интересующийся
Отправить личное сообщение для Шалун Посмотреть профиль Найти все сообщения от Шалун
 
Регистрация: 22.05.2017
Сообщений: 10

Если вы по поводу того, как это все выглядит, то картинки просто выстраиваются друг за другом в вертикальном положении, хотя все должно быть выстроено по горизонтали. ( Все картинки берутся из бд)
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2017, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Шалун,
ок, ждите телепатов.
Ответить с цитированием
  #5 (permalink)  
Старый 22.05.2017, 23:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Потому, что каждое изображение будет помещено в отдельный контейнер с одинаковым id, что уже ошибка. А должно быть:

<div id="container" class="container">

цикл для <div class="item">

конец цикла

</div>
Ответить с цитированием
  #6 (permalink)  
Старый 24.05.2017, 20:20
Интересующийся
Отправить личное сообщение для Шалун Посмотреть профиль Найти все сообщения от Шалун
 
Регистрация: 22.05.2017
Сообщений: 10

laimas,

Огромное спасибо! Помогли!!!
Ответить с цитированием
  #7 (permalink)  
Старый 24.05.2017, 20:23
Интересующийся
Отправить личное сообщение для Шалун Посмотреть профиль Найти все сообщения от Шалун
 
Регистрация: 22.05.2017
Сообщений: 10

laimas,

А не могли бы Вы подсказать, почему Masonry не отодвигается от левого края или же перекрывает слева стоящий от него блок? В css многое, что перепробовала, но все безрезультатно
Ответить с цитированием
  #8 (permalink)  
Старый 24.05.2017, 20:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Шалун
почему Masonry не отодвигается от левого края
Сообщение от рони
может живой пример?
Сообщение от рони
ок, ждите телепатов.
Ответить с цитированием
  #9 (permalink)  
Старый 24.05.2017, 20:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Шалун,
в общем все о плагине рассказано здесь.

Если не получается, значит ваш косяк, а какой сказать без кода невозможно.
Ответить с цитированием
  #10 (permalink)  
Старый 13.06.2017, 16:24
Интересующийся
Отправить личное сообщение для Шалун Посмотреть профиль Найти все сообщения от Шалун
 
Регистрация: 22.05.2017
Сообщений: 10

laimas,
Спасибо Вам)))Выручили)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод xml в виде иерархического дерева AlexTrader Библиотеки/Тулкиты/Фреймворки 3 09.03.2017 15:12
Вывод каталога в виде дерева на js Greyson Элементы интерфейса 8 15.06.2014 09:22