Как сделать одинаковую высоту блоков, если блоки расположенный внутри блока и расположены вертикально?

Question

[Сергей Зверев]

Здраствуйте.
Ни как не могу понять, как лучше решить данную задачу.

Пытаюсь создать с помощью скрипта swiper слайдер, но чтобы в слайдере блоки находящиеся на одном горизонтальном уровне имели одинаковую высоту.
Пример:
Все блоки 1 имели одинаковую высоту, также с блоками 2,3,4 и т.д.

Я думал сделать каждый раз новый слайдер, например:

<div class="swiper">
      <div class="swiper-wrapper">
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">1</div>
      </div>
</div>
<div class="swiper">
      <div class="swiper-wrapper">
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">2</div>
      </div>
</div>

ИЛИ

<div class="swiper">
      <div class="swiper-wrapper">
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">1</div>
            <div class="swiper-slide">1</div>
      </div>
      <div class="swiper-wrapper">
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">2</div>
            <div class="swiper-slide">2</div>
      </div>
</div>

Но в первом случи не получилось синхронизировать стандартными средствами, а во втором ломал скрипт.
Помогите пожалуйста решить данную задачу.

Comments

[Ankhena]

На js выясняете наибольшую высоту у блоков 1. Задаете её всем.
Удобно управлять через кастомные свойства.

[Сергей Зверев]

Ankhena, Об этом первую очередь и подумал, но при первой загрузки страницы получаю не правильную высоту. Буду дальше думать и спасибо за ответ.

$(function(){	
	var column = 0;
	$('.swiper-slide .swiper-slide-item-1').each(function(){
		h = $(this).height();
		if (h > column) {
			column = h;
		}
	}).height(column);
});

[Ankhena]

Сергей Зверев, я не смогла расшифровать эту фразу

при загрузке не верно верно выводить размер, только при первой загрузки страницы и сброса кеша

[Сергей Зверев]

Ankhena, Упс, поправил.

При первой загрузки страницы получаю не правильную высоту.
После повторной загрузки все нормально.

[Ankhena]

Сергей Зверев, вероятно, потому что вычисляете её до того, как всё загрузилось. А нужно дождаться загрузки.

[Сергей Зверев]

Ankhena, Все верно. Спасибо за ответ. Надо мне отдохнуть, а то мозг уже не работает.

Answer 1

[Андрей Рудаков]

Точно такую же задачу решил с помощью библиотеки masonry.

Comments

[Сергей Зверев]

Благодарю за скрипт, но лучше попробую решить проблему с помощью swiper.
Я стараюсь использовать как можно меньше библиотек чтобы не грузить сайт.

Answer 2

[imko]

доки
1fr для каждого ряда

Comments

[Сергей Зверев]

Спасибо за ответ, но это мне не подходить. Проблему решил с помощью скрипта.

$(document).ready(function() {
	function compare_height(id) {
		$(id+' [data-row]').each(function(){
			var column = 0;
			var attr = $(this).data('row');
			$(id+' [data-row="'+attr+'"]').each(function(){
				h = $(this).find(".js-compare-height").height();
				if (h > column) {
					column = h;
				}
				console.log(column);
			}).height(column);
		});
	}
	$(window).on('load resize', function() {
        	compare_height("#bx_catalog_compare_block");
    	});
});

[imko]

Сергей Зверев, а зачем объявлять функцию в слушателе да ещё и в другом?

[Сергей Зверев]

imko, Для AJAX.

[imko]

Сергей Зверев, все еще не понял)

[Сергей Зверев]

imko, Стоить Фильтр, при выборе обновляет слайдер с помощью AJAX.
А функция нужна чтобы запустить скрипт при загрузки и изменения размер окна, и после запроса через AJAX запустить функцию.

[imko]

Сергей Зверев, зачем вызов в слушателе то понятно, объявление зачем?

[Сергей Зверев]

imko, Аа..., всё понял. Это ошибка, писал в спешке, в моём скрипте функция находиться вне объявление.

[Lero62]

Сергей Зверев, У меня это не работает при ресайзе, можете скинуть пример готовый ?