Masonry проблема с Chrome / загрузка с imagesloaded
Доброго времени суток)
Скрипт 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 Объясните, пожалуйста) что и куда копировать? |
misterdc,
jquery есть? |
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,
как вариант сделайте загрузку не $(function(){... а без всяких дополнительных плагинов
$(window).load(function(){
var $container = $('.block_info');
$container.masonry({columnWidth: 150,
itemSelector: 'img'});
});})
|
Может я что-то не так делаю?
Я вставляю этот скрипт в виде:
<script>
$(window).load(function(){
var $container = $('.block_info');
$container.masonry({columnWidth: 150,
itemSelector: 'img'});
});})
</script>
вставляю его в саом конце хедера, прямо перед </head> В браузере проверяю - скрипт на месте. Ошибок нет. Но страницы в хроме продолжают загружаться по настроению - кусок как надо, кусок съехал, потом вся как надо, потом вся съехала. Причем это не зависит от того, закэшированы ли изображения |
Вчера это просто совпадение было - присутствие или отсутствие того скрипта тоже ни как не изменяет ситуацию
|
misterdc,
может ссылку в личку |
misterdc,
и может не $ а jQuery |
Может есть какой-нибудь альтернативный скрипт?
|
Вы просто супер, огромное спасибо за подробный ликбез, не знаю, что я без вас бы делала! Сегодня целый день мучилась с такой же проблемой.
Я даже специально восстановила пароль от этого форума, чтобы вас поблагодарить! |
Цитата:
|
Цитата:
|
Это вот для такого баяна нужен скрипт - http://erikjohanssonphoto.com/work/imagecats/personal/
а для пиндерестовского, ну, может быть просто перетасовать блоки так, чтобы они внизу не повисли соплями. |
| Часовой пояс GMT +3, время: 05:37. |