jQuery implémente le flux en cascade layout

HTML

复制代码代码如下 :

CSS

复制代码代码如下 :

 * {

     marge : 0;

     remplissage : 0 ;

 >

 #principal {

     position : relative ;

 >

 .boîte {

     remplissage : 15px 0 0 15px ;

     float:gauche;

 >

 .pic {

     remplissage : 10 px ;

     bordure : 1px solide #ccc;

     rayon de bordure : 5 px ;

     ombre-boîte : 0px 0px 5px #ccc;

     img {

         largeur:165px;

         hauteur:auto;

     >

 >

JavaScript

复制代码代码如下 :

$(window).on("load",function () {
cascade();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//Simuler les données json ;
$(window).on("scroll",function () {
if(checkScrollSlide){
$.each(dataInt.data,function (key,value) {
var oBox=$("

").addClass("box").appendTo($("#main"));
//jQuery prend en charge la concaténation et l'itération implicite
; var oPic=$("

").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
              });
cascade();
         }
})
});
//Fonction principale de disposition du flux ;
fonction cascade () {
var $boxs=$("#main>div");
//Obtenir l'élément enfant direct div.box sous l'élément #main ;
//Obtenir la largeur de chaque colonne ;
var w=$boxs.eq(0).outerWidth();
//outerWidth() obtient la largeur, y compris le remplissage et la bordure ;
//var w=$boxs.eq(0).width();
//width() ne peut obtenir que la largeur définie pour l'élément ;
var cols=Math.floor($(window).width()/w);
//Combien de colonnes obtenir ;
$("#main").width(w*cols).css("margin","0 auto");
//Définissez la largeur et le style de centrage de l'élément #main ;
var hArr=[];
//Ensemble des hauteurs de chaque colonne;
$boxs.each(fonction (index, valeur) {
//Parcourir chaque élément de la boîte ;
//Afin de trouver le point le plus bas de tous les éléments précédents, définissez ensuite cet élément en dessous du point le plus bas ;
var h=$boxs.eq(index).outerHeight();
//Hauteur de chaque élément de boîte,
             if (index hArr[index]=h;
//Détermine la hauteur du premier élément de chaque colonne ;
           } autre{
var minH=Math.min.apply(null,hArr);
//Obtenir la hauteur minimale dans le tableau de hauteur de colonne ;
var minHIndex=$.inArray(minH,hArr);
//La méthode $.inArray() obtient la valeur d'index de l'élément (minH) dans le tableau (hArr);
//console.log(valeur);
//La valeur à ce moment est l'objet DOM de tous les éléments de la boîte après la première ligne !;
$(valeur).css({
//$(value) : Convertissez l'objet DOM en objet jQuery avant de pouvoir continuer à utiliser les méthodes jQuery
; "position": "absolue",
"haut":minH "px",
"gauche":minHIndex*w "px"
              });
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//Hauteur de l'élément le plus bas et le plus haut La hauteur de l'élément qui vient d'être ajouté à la hauteur la plus basse = nouvelle hauteur de colonne ;
          };
});
// console.log(hArr);
};
fonction checkScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
Retour (lastBoxDis >

Veuillez vous référer attentivement aux commentaires pour une explication détaillée, je ne l'écrirai pas séparément.

Étiquettes associées：

jquery 瀑布流

source：php.cn

Article précédent：JS compatible avec les navigateurs grand public pour copier du contenu vers les compétences clipboard_javascript Article suivant：méthode js pour implémenter la fonction multi-page iframe appelant les compétences javascript

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

Derniers articles par auteur