Показать сообщение отдельно
  #3 (permalink)  
Старый 18.02.2015, 18:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

misterdc, удалите ваш второй пост он только картину портит
и вам для медитации - не ставить класс js-masonry, можно любой другой ... строки 18 - 25 для теста ... остальное нужно.
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .block_info{
       width: 600px;
     }
    img { width: 25%; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
  <script src="https://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
  <script>
     $(function(){
  var s = $(".block_info");
         function more() {
             $.each(Array(Math.round(Math.random() * 50 + 11)), function(indx, element) {
                 $('<img/>', {
                     'src': 'https://tympanus.net/Development/AutomaticImageMontage/images/' + (Math.round(Math.random() * 72 + 1)) + '.jpg'
                 }).prependTo(s)
             });
         }
        more()
 var $container = $('.block_info');
 $container.imagesLoaded( function() {
  $container.masonry({columnWidth: 150,
  itemSelector: 'img'});
});
});
</script>
</head>
<body>
<div class='block_info'></div>
</body>
</html>

Последний раз редактировалось рони, 04.12.2020 в 22:30.
Ответить с цитированием