Показать сообщение отдельно
  #4 (permalink)  
Старый 25.02.2015, 01:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

onotole,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #list{
    width:300px;
    display:flex;
    flex-flow:column wrap;
    height:300px;
  }

  #list>div{
    -webkit-animation:spin 5s ease-in-out infinite 2s;
    animation:spin 5s ease-in-out infinite 2s;
    width:33%;
    height:19%;
    border:1px #FF0033 solid;
    text-align:center;
    line-height:2em;
  }

  @keyframes spin{
    50%{
      width:50%;
      height:12%;
    }

    100%{
      width:33%;
      height:19%;
    }
  }

  @-webkit-keyframes spin{
    50%{
      width:50%;
      height:12%;
    }

    100%{
      width:33%;
      height:19%;
    }
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function() {
       var elems = document.querySelectorAll("#list > div");
       var arr = $.makeArray(elems);
       arr.sort(function(a, b) {
           return $(a).data("count") - $(b).data("count")
       });
       $(arr).appendTo("#list");
   });
  </script>
</head>

<body>
<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>


</body>

</html>
Ответить с цитированием