Вы находитесь здесь:Плагины jQuery»liBlockSIze - jQuery Block Size или выравнивание размеров блоков

liBlockSIze - jQuery Block Size или выравнивание размеров блоков

Воскресенье, 05 Август 2012 01:38 Автор 
effect liBlockSIze - jQuery Block Size или выравнивание размеров блоков

Полезный jQuery плагин для каталогов (блоков с товарами), магазинов (блоков с товарами) и фотогалерей (блоков с фотографиями). Плагин liBlockSize дает возможность выровнять размеры блоков по высоте или ширине (максимальной/минимальной высоте, максимальной/минимальной ширине, максимальной/минимальной высоте/ширине).
Плагин liBlockSize работает во всех браузерах

Пример работы на JSFIDDLE

Подключаемые файлы

Инициализация плагина

Высота блоков очень часто зависит от полной загрузки содержимого, например такого как изображения, поэтому плагин инициализируем уже после полной загрузки всех изображений на странице с помощью $(window).load() 
<script>
$(document).ready(function () {
  $(window).load(function () {
    $('.boxsize').liBlockSize({
      type: 'max', //Тип выравнивания [max/min]
      side: 'h', //Сторона выравнивания [h(высота)/w(ширина)/wh]
      child: 'div' //Эл-т, который выравниваем [child: '.selector']
    });
  })
})
</script>

Структура HTML

Для примера выровняем 4 блока по максимальной высоте 

    
1
2
3

    
1
2

    
1
2
3
4

    
1
2
3
Прочитано 13972 раз Последнее изменение Воскресенье, 30 Март 2014 23:48
Оцените материал
(3 голосов)
Теги

Похожие материалы (по тегу)

Другие материалы в этой категории: « liTextLength - jQuery Substring Text или обрезание лишних символов liActualSize - jQuery Actual Size или реальный размер скрытого элемента »

Комментарии   

 
Дмитрий
# Дмитрий 27.03.2015 19:21
Здравствуйте.
Подскажите, а можно ли сделать так, чтобы эти колонки изменяли свою высоту по самой большой при ресайзе страницы?
Я пробовал методом тыка совмещать события resize и load — но не получилось, то, что надо.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 30.03.2015 15:43
Конечно можно, берите:
http://jsfiddle.net/yurik417/FcNKC/35/
Ответить | Ответить с цитатой | Цитировать
 
 
Дмитрий
# Дмитрий 25.05.2015 08:29
Здорово!
А можно ещё изменить скрипт таким образом, чтобы выравнивались не непосредственно дочерние элементы, а поглубже?
Допустим, такая разметка:


Здесь фото


Здесь фото


Здесь фото


Так вот, чтобы выравнивались блоки с классом image? Такое есть у UiKit, но там слишком уж у компонента размер большой :)
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 02.06.2015 17:34
Цитирую Дмитрий:
Здорово!
А можно ещё изменить скрипт таким образом, чтобы выравнивались не непосредственно дочерние элементы, а поглубже?
Допустим, такая разметка:
Так вот, чтобы выравнивались блоки с классом image? Такое есть у UiKit, но там слишком уж у компонента размер большой :)

http://jsfiddle.net/FcNKC/37/
Ответить | Ответить с цитатой | Цитировать
 
 
Дмитрий
# Дмитрий 02.06.2015 20:00
Цитирую LiMasscode:

http://jsfiddle.net/FcNKC/37/

Я попробовал сделать вот так - http://jsfiddle.net/FcNKC/44/ - чтобы к блокам с разными классами в одной строке подключался этот скрипт, и он подключился. Теперь блоки с фотками могут выравниваться между собой, а блоки с текстом - между собой. Это хорошо!
Но вот выравнивание при ресайзе снова пропало, увы.
Ответить | Ответить с цитатой | Цитировать
 
 
LiMasscode
# LiMasscode 05.06.2015 17:28
Цитирую Дмитрий:
Цитирую LiMasscode:

http://jsfiddle.net/FcNKC/37/

Я попробовал сделать вот так - http://jsfiddle.net/FcNKC/44/ - чтобы к блокам с разными классами в одной строке подключался этот скрипт, и он подключился. Теперь блоки с фотками могут выравниваться между собой, а блоки с текстом - между собой. Это хорошо!
Но вот выравнивание при ресайзе снова пропало, увы.

Выравнивания при ресайзе никогда и не было, но добавить не проблема:
http://jsfiddle.net/FcNKC/47/
Ответить | Ответить с цитатой | Цитировать
 
Наверх
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Чудо облако

Вы находитесь здесь:   ГлавнаяjQueryliBlockSIze - jQuery Block Size или выравнивание размеров блоков