Время чтения: 1 мин. 27 апреля 2016 в 6:59 Javascript
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

Одинаковая высота колонок при использовании Infiniti Scroll

Когда используется вывод постов в несколько колонок, важно чтоб они были одной высоты. Реализовать это можно с помощью JS.

Пример кода:

Вариант 1

[php]
$(document).ready( function(){
var maxHeight = 0;
$(".left").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".left").height(maxHeight);
});
[/php]

Вариант 2

[php]
$(document).ready( function(){
var leftHeight = $(".left").height();
var rightHeight = $(".left").height();
if (leftHeight > rightHeight){ $(".left").height(leftHeight)}
else{ $(".left").height(rightHeight)};
});
[/php]

В одном из проектов использовался Infinity Scroll. В этом случае вышеперечисленные варианты не помогли. Решение нашлось следующее:

Вариант 3 (для Infiniti Scroll)

[php]
$(document).ready( function(){
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ajaxSuccess(function(){
equalHeight($(".left"));
});
});
[/php]

В строке — equalHeight($(«.left»)); ставим название вашего дива.

Похожие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

[contact-form-7 404 "Not Found"]
Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

Введите контактный телефон *

Введите контактный e-mail *

Комментарий

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Введите ваше имя *

Введите контактный email *

Сообщение

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

Введите ваше имя *

Введите контактный email *

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течении 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

Введите ваше имя *

Введите контактный E-mail *

Предварительная запись для получения скидки
Введите ваше имя, телефон и Skype логин и email. Я свяжусь с Вами для уточнения деталей прохождения курса.

С кого числа Вам удобней начать обучение в 2019 году?

Введите контактный телефон *

Введите контактный E-mail *

Выберите программу

Курс SEO для интернет-магазинов

Из данного курса вы узнаете как превратить ваш интернет магазин рабочую лошадку, генерирующую по нарастающей поток клиентов из 300 человек в месяц, в 10 000 в день. С любым ассортиментом.

Особенности продвижения интернет-магазинов, специфика оптимизации. Как избавить себя от рутинной оптимизации каждой страницы и в 1 клик оптимизировать до 10 000 тыс товаров.

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

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 30 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для корпоративных сайтов

Данный курс поможет вашему бизнесу получить новых клиентов из органического трафика.

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

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 20 дней.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для Landing Page

Данный курс - находа для вас, если вы хотите увеличить трафик или не хотите использовать контекстную рекламу для продвижения своего продукта или услуги.

Курс научит Вас оптимизировать и продвигать одностраничные сайты.

И да, все это урок за уроком я лично расскажу Вам и помогу внедрить.

Длительность обучения 1 день.

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

Введите контактный телефон *

Введите ваше Skype логин *

Введите контактный E-mail *

Выберите программу

Курс SEO для самостоятельного обучения

В закрытом разделе моего сайта весь курс представлен в текстовом/видео формате. Если вы желаете обучаться самостоятельно по актуальным данным которые работают в данный момент (поскольку данную информацию я обновляю сразу по мере изменений от поисковых систем) этот курс для вас.

Вы шаг за шагом приведете свой сайт в порядок и сможете увеличить трафик на 500% минимум!!!

Самым важным отличием данного курса от конкурентов является возможность онлайн переговоров со мной лично. Как это работает: вы изучаете урок, у вас появляются вопросы. Вы их записываете, мы созвонимся по скайпу или телефону и я голосом отвечаю на них.

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Комментарий