2016-01-14 2 views
0

HTMLКак оживить движение элементов встроенного блока при изменении размера страницы (в идеале с помощью css)?

<div class="mosaic_tile" style="background:rgb(255,0,0);"> 
</div> 
<div class="mosaic_tile" style="background:rgb(0,255,0);"> 
</div> 
<div class="mosaic_tile" style="background:rgb(0,0,255);"> 
</div> 

CSS

.mosaic_tile{ 
    width:100px; 
    height:100px; 
    display:inline-block; 
} 

https://jsfiddle.net/suse008b/

Обратите внимание, как, когда ширина страницы меньше общей ширины элементов на указанной линии такой элемент перемещается на следующую строку. Есть ли в любом случае для меня оживление движения элементов при их блокировке?

Редактировать: Я нашел пример. Что-то похожее на часть портфолио этой веб-страницы. http://www.socialfix.com/

ответ

1

На примере сайта, который вы упомянули, они используют библиотеку javascript под названием Isotope для этого эффекта.

http://isotope.metafizzy.co/

Смежные вопросы