Maison interface Web js tutoriel 瀑布流布局并自动加载实现代码_jquery

瀑布流布局并自动加载实现代码_jquery

May 16, 2016 pm 05:40 PM
加载 布局 瀑布流

自从Pinterest使用了一种新的方式布局取得成功之后,从此互联网出现了布局潮流,我们把他叫做瀑布流!!在互联网流行起来,从国外到国内普遍存在。国内现有美丽说,蘑菇街,花瓣等代表的网站。

瀑布流是流行一段时间了,现在网上出现了很多的插件。使用起来更是非常的方便。目前用的非常多,并且有是一个juqery的插件masonry,插件地址:http://masonry.desandro.com/

先使用css把一个网页按照从上到下的方式布局好。
使用起来更是非常方便:

我先引用好jquery文件和masonry文件,使用如下代码:

复制代码 代码如下:

$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.content_box',
isFitWidth: true,//// 是否可调整大小 Boolean
isRTL:false ////使用从右到左的布局 Boolean
});
});
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Windows 11 : le moyen simple d'importer et d'exporter des mises en page de démarrage Aug 22, 2023 am 10:13 AM

Dans Windows 11, le menu Démarrer a été repensé et propose un ensemble simplifié d'applications disposées dans une grille de pages, contrairement à son prédécesseur, qui comportait des dossiers, des applications et des applications dans le groupe du menu Démarrer. Vous pouvez personnaliser la disposition du menu Démarrer, l'importer et l'exporter vers d'autres appareils Windows pour la personnaliser à votre guise. Dans ce guide, nous discuterons des instructions étape par étape pour importer la disposition de démarrage afin de personnaliser la disposition par défaut sur Windows 11. Qu’est-ce qu’Import-StartLayout dans Windows 11 ? Import Start Layout est une applet de commande utilisée dans Windows 10 et les versions antérieures pour importer les personnalisations du menu Démarrer dans

Erreur de chargement du plugin dans Illustrator [Corrigé] Erreur de chargement du plugin dans Illustrator [Corrigé] Feb 19, 2024 pm 12:00 PM

Lors du lancement d'Adobe Illustrator, un message d'erreur de chargement du plug-in apparaît-il ? Certains utilisateurs d'Illustrator ont rencontré cette erreur lors de l'ouverture de l'application. Le message est suivi d'une liste de plugins problématiques. Ce message d'erreur indique qu'il y a un problème avec le plug-in installé, mais il peut également être provoqué par d'autres raisons telles qu'un fichier DLL Visual C++ endommagé ou un fichier de préférences endommagé. Si vous rencontrez cette erreur, nous vous guiderons dans cet article pour résoudre le problème, alors continuez à lire ci-dessous. Erreur de chargement du plug-in dans Illustrator Si vous recevez un message d'erreur « Erreur de chargement du plug-in » lorsque vous essayez de lancer Adobe Illustrator, vous pouvez utiliser les éléments suivants : En tant qu'administrateur

Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Comment enregistrer la disposition de la position des icônes du bureau dans Windows 11 Aug 23, 2023 pm 09:53 PM

Windows 11 apporte beaucoup à la table en termes d'expérience utilisateur, mais l'itération n'est pas entièrement à l'épreuve des erreurs. Les utilisateurs rencontrent des problèmes de temps en temps et les modifications apportées au positionnement des icônes sont courantes. Alors, comment enregistrer la disposition du bureau dans Windows 11 ? Il existe des solutions intégrées et tierces pour cette tâche, qu'il s'agisse d'enregistrer la résolution d'écran de la fenêtre actuelle ou la disposition des icônes du bureau. Cela devient encore plus important pour les utilisateurs qui ont de nombreuses icônes sur leur bureau. Lisez la suite pour savoir comment enregistrer les emplacements des icônes du bureau dans Windows 11. Pourquoi Windows 11 n’enregistre-t-il pas les positions de disposition des icônes ? Voici les principales raisons pour lesquelles Windows 11 n'enregistre pas la disposition des icônes du bureau : Modifications des paramètres d'affichage : Généralement, lorsque vous modifiez les paramètres d'affichage, les personnalisations configurées

Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres Les sous-titres Stremio ne fonctionnent pas ; erreur lors du chargement des sous-titres Feb 24, 2024 am 09:50 AM

Les sous-titres ne fonctionnent pas sur Stremio sur votre PC Windows ? Certains utilisateurs de Stremio ont signalé que les sous-titres n'étaient pas affichés dans les vidéos. De nombreux utilisateurs ont signalé avoir rencontré un message d'erreur indiquant « Erreur de chargement des sous-titres ». Voici le message d'erreur complet qui apparaît avec cette erreur : Une erreur s'est produite lors du chargement des sous-titres. Échec du chargement des sous-titres : Cela pourrait être un problème avec le plugin que vous utilisez ou avec votre réseau. Comme l’indique le message d’erreur, il se peut que ce soit votre connexion Internet qui soit à l’origine de l’erreur. Veuillez donc vérifier votre connexion réseau et vous assurer que votre Internet fonctionne correctement. En dehors de cela, il peut y avoir d'autres raisons derrière cette erreur, notamment un module complémentaire de sous-titres conflictuels, des sous-titres non pris en charge pour un contenu vidéo spécifique et une application Stremio obsolète. comme

Outlook se bloque lors de l'insertion d'un lien hypertexte Outlook se bloque lors de l'insertion d'un lien hypertexte Feb 19, 2024 pm 03:00 PM

Si vous rencontrez des problèmes de blocage lors de l'insertion de liens hypertexte dans Outlook, cela peut être dû à des connexions réseau instables, à d'anciennes versions d'Outlook, à des interférences provenant d'un logiciel antivirus ou à des conflits de compléments. Ces facteurs peuvent empêcher Outlook de gérer correctement les opérations de liens hypertexte. Corriger le blocage d'Outlook lors de l'insertion d'hyperliens Utilisez les correctifs suivants pour corriger le blocage d'Outlook lors de l'insertion d'hyperliens : Vérifiez les compléments installés Mettre à jour Outlook Désactivez temporairement votre logiciel antivirus, puis essayez de créer un nouveau profil utilisateur Réparer le programme des applications Office Désinstaller et réinstaller Office Commençons. 1] Vérifiez les compléments installés. Il se peut qu'un complément installé dans Outlook soit à l'origine du problème.

Guide pour résoudre le désalignement des pages Web WordPress Guide pour résoudre le désalignement des pages Web WordPress Mar 05, 2024 pm 01:12 PM

Guide pour résoudre les pages Web WordPress mal alignées Dans le développement de sites Web WordPress, nous rencontrons parfois des éléments de page Web mal alignés. Cela peut être dû à des tailles d'écran sur différents appareils, à la compatibilité du navigateur ou à des paramètres de style CSS inappropriés. Pour résoudre ce désalignement, nous devons analyser soigneusement le problème, trouver les causes possibles, puis le déboguer et le réparer étape par étape. Cet article partagera certains problèmes courants de désalignement des pages Web WordPress et les solutions correspondantes, et fournira des exemples de code spécifiques pour aider à développer

Comment résoudre le problème que les CSS ne peuvent pas être chargés Comment résoudre le problème que les CSS ne peuvent pas être chargés Oct 20, 2023 am 11:29 AM

Les solutions au problème selon lequel CSS ne peut pas être chargé incluent la vérification du chemin du fichier, la vérification du contenu du fichier, la suppression du cache du navigateur, la vérification des paramètres du serveur, l'utilisation des outils de développement et la vérification de la connexion réseau. Introduction détaillée : 1. Vérifiez le chemin du fichier. Tout d'abord, assurez-vous que le chemin du fichier CSS est correct. Si le fichier CSS se trouve dans une autre partie ou sous-répertoire du site Web, vous devez fournir le chemin correct. Le fichier CSS se trouve dans le répertoire racine, le chemin doit être direct. ; 2. Vérifiez le contenu du fichier, le problème peut résider dans le fichier CSS lui-même.

Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Comment créer une mise en page carrousel réactive en utilisant HTML et CSS Oct 20, 2023 pm 04:24 PM

Comment créer une mise en page de carrousel réactif à l'aide de HTML et CSS Les carrousels sont un élément courant dans la conception Web moderne. Il peut attirer l'attention de l'utilisateur, afficher plusieurs contenus ou images et basculer automatiquement. Dans cet article, nous expliquerons comment créer une mise en page carrousel réactive en utilisant HTML et CSS. Tout d’abord, nous devons créer une structure HTML de base et ajouter les styles CSS requis. Ce qui suit est une structure HTML simple : <!DOCTYPEhtml&g

See all articles