Форум

misterdc · #1 (**permalink**) 18.02.2015, 15:27

Доброго времени суток)

Скрипт masonry позволяет иметь структуру блоков как на сайте pinterest (вдруг кто не знает))
https://github.com/desandro/masonry

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

Эта проблема решается с помощью скрипта imagesLoaded.
https://github.com/desandro/imagesloaded

Но как? Я не понимаю, т.к. плохо знаю js, можете помочь с этим?

Собственно, сейчас ситуация следующая:
сайт на joomla, в хедере подключены скрипты:
<script src="/templates/rt_chimera/js/imagesloaded.pkgd.min.js"></script>
<script src="/templates/rt_chimera/js/masonry.pkgd.min.js"></script>

Для запуска masonry, я добавляю к родительскому div класс "js-masonry", как прописано вот тут: http://masonry.desandro.com/#init-with-html

Вот тут, вроде как объясняется, как использовать imagesLoaded скрипт, но я не пойму, как?
http://masonry.desandro.com/appendix.html

Объясните, пожалуйста) что и куда копировать?

рони · #2 (**permalink**) 18.02.2015, 18:11

misterdc,
jquery есть?

рони · #3 (**permalink**) 18.02.2015, 18:42

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>

misterdc · #4 (**permalink**) 18.02.2015, 19:14

Благодарю вас,рони) Все работает)

misterdc · #5 (**permalink**) 19.02.2015, 17:42

время от времени это не срабатывает и все съезжает опять. Почему так?

misterdc · #6 (**permalink**) 19.02.2015, 17:47

Может есть какой-нибудь альтернативный скрипт?

рони · #7 (**permalink**) 19.02.2015, 18:56

misterdc,
как вариант сделайте загрузку не $(function(){...
а без всяких дополнительных плагинов

$(window).load(function(){ 
var $container = $('.block_info');
$container.masonry({columnWidth: 150,
  itemSelector: 'img'});
});})

misterdc · #8 (**permalink**) 19.02.2015, 19:11

Может я что-то не так делаю?
Я вставляю этот скрипт в виде:

<script>
	$(window).load(function(){ 
var $container = $('.block_info');
$container.masonry({columnWidth: 150,
  itemSelector: 'img'});
});})
</script>

вставляю его в саом конце хедера, прямо перед </head>
В браузере проверяю - скрипт на месте. Ошибок нет. Но страницы в хроме продолжают загружаться по настроению - кусок как надо, кусок съехал, потом вся как надо, потом вся съехала. Причем это не зависит от того, закэшированы ли изображения

misterdc · #9 (**permalink**) 19.02.2015, 19:22

Вчера это просто совпадение было - присутствие или отсутствие того скрипта тоже ни как не изменяет ситуацию

рони · #10 (**permalink**) 19.02.2015, 19:24

misterdc,
может ссылку в личку

Форум

Справочник

Discord чат

Курсы javascript