Есть 4 колонки, в каждой колонке по 4 элемента. Задача скрипта выровнять ряд в колонке по наибольшему элементу.
Все работает, но почему-то не всегда. Можно несколько раз обновить страницу, мало того, что скрипт не срабатывает, дак еще и хуже становится... В чем может быть дело.
$height когда скрипт не сработал.
$height когда скрипт не сработал.
CODE ( javascript):
скопировать код в буфер обмена
$(function(){ equalItemHeights('.items', '.item'); function equalItemHeights($col, $row){ // колонка $items = $($col); // перебираем все колонки $items.each(function(){ var $height = 0; $item = $(this).find($row); // перебираем все элементы в данной колонке $item.each(function(){ // в эту переменную записывается высота элемента (если она больше, чем прежняя). var $cItem = $(this); if ($height < $cItem.height()){ $height = $cItem.height(); } }); $item.height($height); }); }; });
CODE ( html):
скопировать код в буфер обмена
<div class="items row"> <div class="col-md-3 col-sm-6"> <div class="item"> <img src="http://placehold.it/253x142" alt=""> <h3><a href="">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. </p> </div> <!--item--> </div> <!-- col-md-3 col-sm-6 --> <div class="col-md-3 col-sm-6"> <div class="item"> <img src="http://placehold.it/253x142" alt=""> <h3><a href="">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. </p> </div> <!--item--> </div> <!-- col-md-3 col-sm-6 --> <div class="col-md-3 col-sm-6"> <div class="item"> <img src="http://placehold.it/253x142" alt=""> <h3><a href="">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. </p> </div> <!--item--> </div> <!-- col-md-3 col-sm-6 --> <div class="col-md-3 col-sm-6"> <div class="item"> <img src="http://placehold.it/253x142" alt=""> <h3><a href="">Lorem ipsum dolor sit amet consectetuer adipiscing elit.</a></h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis. </p> </div> <!--item--> </div> <!-- col-md-3 col-sm-6 --> </div> <!-- items -->
http://rghost[dot]ru/55211977[dot]view
http://rghost.ru/55211988.view(Отредактировано автором: 16 Мая, 2014 - 10:40:13)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Описание: Из за чего такое может быть?
