Je crée un site Web en utilisant Bootstrap et Maçonnerie. Tout fonctionne bien, mais lorsque la page se charge, pendant les 2 premières secondes, les éléments passent de gauche à centre.Les éléments se déplacent sur la page en utilisant Bootstrap et la maçonnerie
Comment faire pour que la page se charge instantanément avec les éléments de la grille parfaitement au centre. Le déplacement des éléments semble laid.
Le code: http://bl.ocks.org/bollwyvl/e77b3c9d3b322e511ecf
Site Web: http://bl.ocks.org/bollwyvl/raw/e77b3c9d3b322e511ecf/
J'utilise le code ci-dessus. (Veuillez actualiser le site Web pour voir l'effet).
Il doit faire quelque chose avec le code suivant en cours d'exécution seulement après le chargement des ressources jQuery. Existe-t-il une solution de contournement pour que les éléments de la grille s'affichent parfaitement au centre lors du chargement du site Web.
jQuery(window).bind('resize', function() {
if (!jQuery('#posts').parent().hasClass('container')) {
// Resets all widths to 'auto' to sterilize calculations
post_width = jQuery('#post').width() + gutter;
jQuery('#posts, body > #grid').css('width', 'auto');
// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
posts_per_row = jQuery('#posts').innerWidth()/post_width;
floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
posts_width = (ceil_posts_width > jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
if (posts_width == jQuery('#post').width()) {
posts_width = '100%';
}
// Ensures that all top-level elements have equal width and stay centered
jQuery('#posts, #grid').css('width', posts_width);
jQuery('#grid').css({'margin': '0 auto'});
}
}).trigger('resize');
Essayé en utilisant la méthode jquery '.load()'? – Raymond
@Raymond: Je l'ai essayé avec la charge. Ça n'aide pas. – bootprob
Exécutez le script avant que le navigateur charge le DOM? – Raymond