Столбцы для каменной кладки

Question

Я хочу перепроектировать мой сайт, добавив новый тип галереи (в нескольких словах, речь идет о кладке).

На мой взгляд, мне нужна полная ширина страницы с несколькими столбцами для изображений. Проблема следующая: с этим кодом у меня есть только 2 столбца; на самом деле внутри столбцов у меня есть только изображения.

The code:

var $container = $('#container'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.item' 
    }); 
}); 

Я хочу изображения на всю ширину, с 4-5 столбцов зависит от ширины изображения.

Answer 1

У вас есть несколько проблем с кодом. Вы устанавливаете параметры кладки в 2 местах, используя атрибуты данных в html и javascript. Вы используете jQuery js, но вы не включили jQuery в свой jsfiddle. Вы вызываете imagesloaded.js, но вы не включили его в свою скрипту. У вас установлена ​​ширина столбца 200, но ваш процент использования для ваших предметов. Вот обновленный jsfiddle с использованием jQuery, изображений и сетки, а ваши изображения более отзывчивы.

Код:

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.item', 
    columnWidth: '.grid-sizer' 
    }); 
}); 

CSS

.item { width: 25%; } 
.item.w2 { width: 50%; } 
.grid-sizer { width: 25%; } 
.item img{width:100%;} 

Смотрите HTML о том, как использовать сетку-классификатор. я удалил вашу установку данных атрибутов, а также

---- ADDENDUM ------- в ответ на ваши комментарии

Вы пытаетесь вызвать, imagesloaded и кладочные перед JS файлы даже загружены , поэтому вы получаете «неопределенную» ошибку.

ЭТО:

<script> 
      var $container = $('#container'); 
       $container.imagesLoaded(function(){ 
        $container.masonry({ 
        itemSelector : '.item', 
        columnWidth: '.grid-sizer' 
        }); 
       }); 

      </script> 

должен быть загружен после этого:

<script type="text/javascript" src="js/nav.js"></script> 
<script type="text/javascript" src="js/classie.js"></script> 
<script src="js/masonry.pkgd.min.js"></script> 
<script src="js/imagesloaded.pkgd.min.js"></script> 

не перед ними, как и у вас есть сейчас.