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

Question

[Роман Скобцов]

Как реализовать плавное смещение-перемещение-сдвиг блока вниз,когда он начинает не умещаться при изменении ширины браузера!Тоесть блок должен не мгновенно появляться снизу,а плавно переместиться вниз из той области где он не уместился-перестроиться и тд!

Answer 1

[Serdji]

Тут нужно условие, можно на JQuery написать, примерно так

var height = $(window).height(),
		width  = $(window).width();

		if (height > 600 && width > 1900) {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		} else {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		};

Это
$('.....').animate

Имеется в виду объект или объекты которые должны перемещаться.

Answer 2

[Кирилл Туровников]

Очень хороший плагин для этого isotope/, он включает много шаблонов компоновки блоков, например, тот же masonry.

Answer 3

[look2009]

Тут поможет juery. Посмотрите команды fadein, fadeout или animate, они такое умеют, ну и придётся учитывать изменение ширины экрана.

Answer 4

[Андрей Гончаров]

анимировать позицию элемента можно, изменяя координаты расположения его. Элемент должен быть абсолютно спозиционирован и менять свои top,left,right,bottom свойства.

Answer 5

[Андрей Б.]

Такое возможно только при условии, что ваша сетка построена на позиционировании или transform, тогда можно добиться плавности анимируя свойства top/left/right/bottom или transform.
По такому принципу работает данная сетка codepen.io/desandro/pen/osFxj

Comments

[Роман Скобцов]

это я понял,но в случае если один из блоков изменит ширину,то как реализовать такую же перестройку блоков пока ума не приложу!

[expeerd]

Роман Скобцов: написать библиотечку, которая будет делать верстку и следить за всем, ну или найти такую.

[Андрей Б.]

Роман Скобцов на CSS вы такое не сделаете, на JS можно, но зачем велосипед, есть готовое masonry.desandro.com

Answer 6

[Oleg Vavilov]

Вот хороший плагин для этого дела masonry.desandro.com