{Решено}Вывод в несколько столбов через views

Пнд, 20/03/2017 - 10:21

Здравствуйте, подскажите пожалуйста, есть желание (именно желание, так что если предложите альтернативный шаблон вывода, я не обижусь :D) сделать вывод вьюшки в 2-4 столба, не принципиально, но с группирующим полем. Группирующее поле это марка машины, слева, а справа собственно автомобили этой марки, банальное float:left делает немного не то, остаются жуткие пропуски, я собственно не знаю что с этим делать, хочется чего-нить поровнее, при этом список не извращенный, а самый обычный слева на право, первая строка 1,2,3, вторая 4,5,6 и т.д
Не подскажите какой сделать вывод во вьюшке, чтоб можно было потом все это подвигать(сейчас html список, там груп.поле и заголовки сгруппированы, еще в сетке вроде так же, только группирующее поле как caption выводится, а не h3, ну или что-то вроде того), и чем это все двигать или может альтернативы?
В данный момент на странице ничего не прописано, на скрине с помощью stylebot настройка, чисто показать проблему, а так сама страница вот http://darkaind.ru/best-cars-in-the-world2

0 Спасибо

Комментарии

Аватар пользователя fairrandir
2 дня 17 часов назад fairrandir #

Можно использовать css flex.
Можно использовать старую-добрую таблицу.
Можно заюзать https://www.drupal.org/project/masonry
Можно через js всем дивам в одном ряду одинаковую высоту выставлять.

0 Спасибо
Аватар пользователя DarKaynd
2 дня 16 часов назад DarKaynd #

ну одну высоту не хочется, флекс вроде ничего, они идут в ряд ровненько, но хочется, чтобы пустое пространстрво в вертикале заполнялось. Флекс вроде это должен делать, но я пока не понял как) masonry вообще непонятно. Подключил masonry views, там группирующее поле отдельно и вообще его корежит когда сам че-нить править начинаю...
Лан, помучаю флекс, спасибо)

0 Спасибо
Аватар пользователя DarKaynd
2 дня 13 часов назад DarKaynd #

у меня флекс все в одной линии ровняет, он заполняет пространство растягивая/ужимая, а мне хочется, чтобы заполнялось тем что туда влезает, хотя бы частично...
Вот как я это вижу, сейчас у меня мозгов хватило как на картинку 1, а надо как на 2. Флекс так может, тупить дальше или это проще по другому сделать?

0 Спасибо
Делает так
А надо вот так
Аватар пользователя bumble
2 дня 13 часов назад bumble #

Вариант раз - юзать обтекание (вангую повсеместный ужас вместо достижения нужного эффекта).
Вариант два - заюзать одну из js'ин, например, ту что советовали в первом комменте - она популярная и проверенная.

Флекс - для других целей.

1 Спасибо
Аватар пользователя DarKaynd
2 дня 12 часов назад DarKaynd #

это masonry которая?

0 Спасибо
Аватар пользователя DarKaynd
15 часов 31 мин. назад DarKaynd #

Чет я туплю, у меня ничего не получается :(
Значит Masonry, вот что я делаю. Скачал/поставил Masonry API, версия 7.x-3.0-beta1. Скачал для v3 masonry.pkgd.min.js, закинул его в libraries/masonry, потом скачал imagesloaded.pkgd.min.js, его в libraries/imagesloaded. Ну как там в инструкции. Включил. В отчете ошибок нет, jQuery Masonry - 3.3.2 зелененьким.
После я так понимаю нужно js кодом его запускать. Значит страница почти тажа http://darkaind.ru/best-cars-in-the-world, имеем див .view-bcitw .view-content, в котором находятся блоки которые нужно расставить .views-table, ну как бы я сделал(взял с сайта masonry) такой код

$('.view-bcitw .view-content').masonry({
  itemSelector: '.views-table',
  columnWidth: 160
});

ну и ничего... что я делаю не так?( (пробовал вторую версию, тоже не работает)

0 Спасибо
Аватар пользователя bumble
15 часов 28 мин. назад bumble #

Смотрите логи в консольке.

0 Спасибо
Аватар пользователя DarKaynd
15 часов 2 мин. назад DarKaynd #

Чет там про то, что masonry не функция :) Я не силен в кодинге... как его подключить правильно чтоб работал...?

0 Спасибо
Аватар пользователя DarKaynd
14 часов 48 сек. назад DarKaynd #

Случилось чудо, я файл masonry.pkgd.min.js кинул в папку js/all, я так понял он через autoload js загрузился и все заработало)

0 Спасибо
Аватар пользователя DarKaynd
13 часов 36 мин. назад DarKaynd #

Только почему он ломает мне высоту колонок...

0 Спасибо
Аватар пользователя DarKaynd
13 часов 26 мин. назад DarKaynd #

ааа, мой моск...
короч jquery ломает, а javascript нет

(function ($) {
  Drupal.behaviors.myJsStructure = {
    attach: function (context) {
var container = document.querySelector('.view-bcitw');
var msnry = new Masonry( container, {
  // Настройки
  columnWidth: 200,
  itemSelector: '.views-table'
});
}
  };
})(jQuery);

Вот этот код работает

0 Спасибо