Masonry - вывод блоков в виде кирпичной кладки

@Шалун · Регистрация: 27.02.2017

Студворк — интернет-сервис помощи студентам

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

CSS
1
2
3
4
5
6
7
8
9
10
.item { width: 300px; }
.item.w2 { width: 300px; }
.item.w1 img{
 width: 300px;
  height: 200px;
  }
#container {
width: 300px;
height: 250px;
}

PHP
1
2
3
4
5
<div id="container" class="container" >
  <div class="item w1"><a href="#"><img src="<?= $item['images']?>"  /></a> </div>
  <div class="item w2">...</div>
  <div class="item">...</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // Настройки
  columnWidth: 300,
  itemSelector: '.item'
});
 
</script>

@evikza · 21.05.2017, 18:20

Шалун, у вас основной блок #container имеет размеры 300x250. Это и есть размер одного изображения, вот они и выстраиваются в высоту.

Задайте например:

CSS
1
2
3
4
#container {
  max-width: 1280px;
  margin: 0 auto;
}

Ну и исполняемый скрипт Masonry добавьте после закрывающегося тега </body>.

Демонстрация

@Шалун · 21.05.2017, 18:46 **[ТС]**

К сожалению, они все еще расположены вертикально. Хотя, если брать картинки не из бд, а из интернета, то все получается

@mrtoxas · 21.05.2017, 20:36

Сообщение от evikza

после

Перед. После </body> ничего быть не должно и не будет, кроме </html>

Шалун, Кэш почистили везде - браузер, cms? Что говорит консоль?

@Шалун · 22.05.2017, 22:11 **[ТС]**

mrtoxas, с кэшем все в порядке. Ошибка в самом коде. Потому что даже обычный текст из бд он выводит вертикально

Добавлено через 15 минут
mrtoxas, Если смотреть более объективно, то весь код выглядит так:

PHP
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
<!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;?>
 
<script type="text/javascript">
 
  var container = document.querySelector("#container");
  var msnry = new Masonry(container, {
    columnWidth: 300,
    itemSelector: ".item",
    gutter: 15
  });
</script>
 
 </body>
 </html>

( строчки 22-25 и 34 - получение данных из бд)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	21.05.2017, 18:46 [ТС]
	К сожалению, они все еще расположены вертикально. Хотя, если брать картинки не из бд, а из интернета, то все получается 0