Нужна помощь. Начал работать с фронтендом. Навыков нету, а роботу сделать нужно. Помогите, пожалуйста.
Нужно разместить дивы по горизонтали и по вертикали, но чтобы отсупы по вертикали были по отношению к диву сверху (так, как показано на рисунке):
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНужна помощь. Начал работать с фронтендом. Навыков нету, а роботу сделать нужно. Помогите, пожалуйста.
Нужно разместить дивы по горизонтали и по вертикали, но чтобы отсупы по вертикали были по отношению к диву сверху (так, как показано на рисунке):
Способов насчитал 3, из которых на данный момент приемлемы 2, рассказываю в порядке приоритетности (первый - самый приоритетный):
1) "Шаблонизировать" код на сервере таким образом, чтобы формировались три колонки. И далее сложить это всё в три блока: на выходе получаем такую разметку: http://jsfiddle.net/81L46xbd/4/
2) Применить JavaScript: если шаблон править возможности\желания нет: применяем яваскрипт, блоки можно выводить "скопом" и не задумываться: http://jsfiddle.net/81L46xbd/2/
Код примерно такой:
var customBox = function(_class,columns){
_class = _class || '.bricks';
columns = columns || 3;
var $box = $(_class);
var $target = $box.find('.brick');
var cur = 0;
for(var i=0;i<columns;i++){
$box.append('<div class="column"></div>');
};
var $cols = $box.find('.column');
$.each($target,function(i,e){
var $element = $(e);
if (cur == columns) { cur=0; }
$element.prependTo($cols.eq(cur));
cur++;
});
};
customBox();
3) Использовать крутое CCS свойство: column-count
: http://jsfiddle.net/81L46xbd/6/
Плюсы данного подхода: простота. Минусы внятно работает только в webkit, в опере, фф, ие либо не работает, либо может переносить блок по частям, тем самым делить контент.