У меня была аналогичная проблема с масонством, с проектом, который сейчас, к сожалению, отсутствует, поэтому я не могу дать вам URL. Я выкопал код, и моим решением было следующее:
$(document).ready(function() {
// Count the images in the masonry div
num_images = $("#content img").length
// Set a counter to track how many have loaded.
img_counter = 0;
// As each image loads, increment the counter. If they are all loaded,
// call masonry.
$("#content img").on('load', function() {
img_counter++;
if (img_counter == num_images) {
// And I seem to have settled on calling masonry twice to help fix the glitch!
// This is as I found it in my code.
$("#content").masonry('reloadItems').masonry();
}
});
});
Это jQuery-flavored; это не похоже, что вы используете jQuery, но я надеюсь, что это поможет.
Update:
Я только что нашел этот раздел кладки документов, которые я не помню из моего времени с масонством:
http://masonry.desandro.com/appendix.html#imagesloaded
Если я жду на странице tumblr, чтобы завершить загрузку, затем откройте консоль и введите:
var $tumblelog = $('#content');
$tumblelog.masonry('layout')
тогда макет работ и перекрытие исчезают. Поэтому, если мы подождем достаточно долго, вызов метода макета устраняет вашу проблему. Задача состоит в том, чтобы решить, что нам нужно ждать! Некоторые опции:
- Попробуйте imagesLoaded или мой счетчик изображений подхода, но использование $ tumblelog.masonry («макет»)
- выше URL говорит веб-шрифты также мешают макете масонства, поэтому установить webfontloader и вызов («макет») только тогда, когда изображения и загружены шрифты (обещает может помочь)
Просто используйте тайм-аут - немного взлома!
window.setTimeout (функция() {$ tumblelog.masonry ('раскладка') }, 1000)
и настроить значение тайм-аута, пока он работает.
Второе обновление
Вот скрипка, показывающий, как переделать макет масонства после шрифтов и изображений оба загружены:
http://jsfiddle.net/sifriday/5xotLj23/3/
Я не знаю, как Tumblr загружает контент в ваш шаблон, но я считаю, что проблема возникает из-за сложности сложности, связанной с вставкой содержимого в DOM, поэтому я попытался воссоздать это, добавив ваше изображение используя JS. Внутри скрипки есть строка JS, которая, если вы прокомментируете это, повторите запуск скрипта, похоже, воссоздает проблему перекрытия.
Быстрый Tumblr Hack
В шаблоне, где вы работаете с docReady, попробуйте следующее:
docReady(function() {
window.setTimeout(function() {
$("#content").masonry('layout');
}, 2000);
});
Через две секунды, что будет вызывать Кладка переделывать макет. Если это работает, то вы знаете, что проблема определенно связана с ожиданием правильной комбинации вещей для загрузки.
Essential код
Чтобы интегрировать мою скрипку,
Удалите CSS, который загружает Google Font.
Используйте этот JS:
docReady(function() {
// Asynchronously load the Google web fonts script, as if it was included in the
// <head> element.
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
// When we have the script, load the fonts.
wf.onload = function() {
WebFont.load({
// Put your font families here. You can get these from the usual Google Fonts page;
// from the bit where you copy-paste the CSS URL, select the 'JavaScript' tab and
// you will see the families definition for the fonts you have selected.
google: { families: [ 'Arvo::latin' ] },
// When the font is loaded, resolve its Deferred object.
active: function() {
console.log("Fonts active")
fonts_loaded.resolve()
}
});
}
// Set up two Deferred objects, to track images and fonts.
var images_loaded = $.Deferred()
var fonts_loaded = $.Deferred()
// When both promises complete, redo the Masonry layout.
$.when(images_loaded, fonts_loaded).done(function() {
console.log("Redoing Masonry");
// Try commenting out this line; without it, masonry won't find any images
// and the layout should be standard HTML.
$("#content").masonry('reloadItems');
// Try commenting out this line; without it, the layout algorithm should be
// messed up, and the images will overlap.
$("#content").masonry('layout');
});
// Deal with the image loading process using Masonry's imagesLoaded plugin.
$("#content").imagesLoaded(function() {
console.log("Images loaded")
images_loaded.resolve();
});
});
Обновление определения шрифта в этой строке:
google: { families: [ 'Arvo::latin' ] },
они все еще пересекаются:/ – Penny
- ваш публичный проект - есть ли у вас URL-адрес, на который я могу взглянуть? – sifriday
Да, это так! http://themeexp1.tumblr.com/ Я удалил все загруженные изображения на данный момент – Penny