Un exemple de code de mise en page du débit de cascade

Auteur：Eve Cole Date de mise à jour：2025-06-12 18:00:04

La copie de code est la suivante:

<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<adal>

<Title> Code de mise en page du flux de cascade </TITAL>

corps, div, img, h1, h2, h3, h4, h5, h6 {rembourrage: 0px; marge: 0px; }

IMG {Border: Aucun; }

.wrapper {width: 960px; marge: 0 auto; }

# con1_1 {position: relative; }

# con1_1 .product_list {position: absolue; gauche: 0px; En haut: 0px; rembourrage: 10px; Contexte: #eee; }

.product_list img {width: 200px; Affichage: bloc; }

.product_list h2 {padding: 5px 0px; taille de police: 12px; Texte-aligne: Centre; Couleur: # 333; }

</ style>

</ head>

<body>

<div>

<h3> Ceci est le titre du texte </h3>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h2> Hauteur d'image </h2>

</div>

<h3> La position de cette ligne de texte doit d'abord être utilisée pour calculer la hauteur du contenu ci-dessus en utilisant JS </H3>

</div>

</docy>

/ *

Principe: 1. Mettez toutes les valeurs de hauteur de Li dans le tableau

2. Les sommets de la première ligne sont 0

3. Calculer qui est la plus petite valeur de hauteur

4. Mettez le prochain li sous ce li

* /

Var marge = 10; // définir l'espacement

var li = $ (". Product_list"); // Nom de blocage

var li_w = li [0] .offsetwidth + marge; // récupérer la largeur réelle du bloc

fonction liuxiaofan () {

var h = []; // tableau qui enregistre la hauteur du bloc

var n = 960 / li_w | 0;

pour (var i = 0; i <li.length; i ++) {

li_h = li [i] .offsetheight; // obtenir la hauteur de chaque li

si (i <n) {// n est le li avec le plus de lignes, donc moins de n est la première ligne

max_h = math.max.apply (null, h);

h [i] = li_h; // mettre chaque li dans le tableau

li.eq (i) .css ("top", 0); // La valeur supérieure de Li dans la première ligne est 0

li.eq (i) .css ("gauche", i * li_w); // La coordonnée gauche du i -th li est la largeur de i * li

}

autre{

min_h = math.min.apply (null, h); // Obtenez la valeur minimale dans le tableau, celle avec la plus petite valeur de hauteur dans le bloc

Minkey = getArraykey (h, min_h); // pointeur correspondant à la plus petite valeur

h [minekey] + = li_h + marge; // ajouter une valeur de hauteur après avoir ajouté une nouvelle hauteur

li.eq (i) .css ("top", min_h + marge); // obtenez d'abord le Li avec la plus petite hauteur, puis mettez le lien suivant en dessous

li.eq (i) .css ("Left", mineke * li_w); // La coordonnée gauche du i -th li est la largeur de i * li

}

$ ("h2"). eq (i) .text ("hauteur:" + li_h); // Écrivez la valeur de hauteur du bloc dans le titre de bloc H2 correspondant

}

max = math.max.apply (null, h);

$ ("# con1_1"). css ("hauteur", max);

}

/ * Utilisez le FOR In opération pour renvoyer le nombre correspondant d'éléments d'une certaine valeur dans le tableau (par exemple, calculer la plus petite valeur de hauteur est le nombre dans le tableau) * /

fonction getArrayKey (s, v) {for (k in s) {if (s [k] == v) {return k;}}}

/ * Assurez-vous d'utiliser Onload ici, car l'image ne connaît pas la valeur de hauteur si elle n'est pas chargée * /

window.onload = function () {liuxiaofan ();};

window.onresize = function () {liuxiaofan ();};

$ (function () {

$ (". product_list"). hover (function () {

$ (this) .css ("background-color", "# ddd");

},fonction() {

$ (this) .css ("background-color", "# eee");

});

</cript>

</html>