J'ai vu l'utilisation par le professeur Amy de JavaScript pour mettre en œuvre le flux de cascade ces jours-ci, j'ai donc suivi le code. J'ai trouvé que l'écriture comme celle-ci ne peut s'adapter à l'écran que lors du chargement pour la première fois, puis la modification de la taille de la fenêtre ne pourra pas s'adapter.
J'ai donc pensé à utiliser la fenêtre.
La copie de code est la suivante:
window.onload = function () {
// Fonction d'écoulement de la cascade
cascade («contenu», «boîte»);
// Simuler le chargement des données
var dataint = {"data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}
// Lorsque la taille de l'écran change, la fonction d'écoulement de la cascade sera réadaptée.
window.onresize = function () {
// cascade («contenu», «boîte»);
setTimeOut (function () {waterfall ('contenu', 'box');}, 200);
}
window.onscroll = function () {
if (checkscroll ()) {
var Outdoor = document.getElementById ('Content');
// ajouter les données colorées dans HTML
pour (var i = 0; i <dataint.data.length; i ++) {
var obox = document.CreateElement ("div");
obox.classname = "box";
extérieur.ApendChild (obox);
var opic = document.CreateElement ("div");
opic.classname = "pic";
obox.ApendChild (OPIC);
var oimg = document.CreateElement ("img");
oimg.src = "img /" + dataint.data [i] .src;
OPIC.APPENDCHILD (OIMG);
}
cascade («contenu», «boîte»);
}
}
}
C'est ok lorsque l'écran est réduit, mais un bug apparaît du zoom-in
Je n'ai pas vu que le haut des prochaines colonnes ne peut pas revenir.
J'ai donc ouvert l'outil de développement pour voir ce qui s'est passé.
Il ne devrait pas y avoir de style dans le 5ème div. C'est parce qu'il y a été ajouté lorsqu'il rétrécit, mais il a été agrandi et il ne l'a pas effacé, il apparaîtrait donc s'il était conservé. Donc: j'ai ajouté la phrase abox [i] .style.csstext = '' à la fonction d'écoulement de la cascade; Pour que chaque fois que je viens, j'éclate le style
La copie de code est la suivante:
fonction cascade (parent, boîte) {
// Sortez toutes les boîtes de classe sous contenu
var aparent = document.getElementById (parent);
var abox = getBClass (aparent, box);
// Obtenez la largeur de la boîte
var aboxw = abox [0] .offsetWidth;
// Utilisez la largeur du navigateur pour diviser la largeur de la boîte pour obtenir le nombre de colonnes
var cols = math.floor (document.DocumentElement.ClientWidth / Aboxw);
// définir la largeur et le centre du contenu
aparent.style.csstext = 'width:' + aboxw * cols + 'px; hauteur: auto; position: relative; marge: 0 auto; padding-droite: 15px ';
// Créer un tableau de hauteur pour chaque colonne
var harr = [];
pour (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
harr.push (abox [i] .offsetheight);
}autre{
var minh = math.min.apply (null, harr);
var index = getminindex (harr, minh); // découvrez la valeur d'index avec la hauteur la plus courte
//console.log(aboxw);
abox [i] .style.position = 'absolue';
abox [i] .style.top = Minh + 'px';
abox [i] .style.left = aboxw * index + 'px';
harr [index] + = abox [i] .offsetheight;
}
}
}
Cela résout le bug qui ne peut pas être retourné après le rétrécissement et peut s'adapter normalement
Enfin, j'ai posté le javascript entier
La copie de code est la suivante:
window.onload = function () {
// Fonction d'écoulement de la cascade
cascade («contenu», «boîte»);
// Simuler le chargement des données
var dataint = {"data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}
// Lorsque la taille de l'écran change, la fonction d'écoulement de la cascade sera réadaptée.
window.onresize = function () {
// cascade («contenu», «boîte»);
setTimeOut (function () {waterfall ('contenu', 'box');}, 200);
}
window.onscroll = function () {
if (checkscroll ()) {
var Outdoor = document.getElementById ('Content');
// ajouter les données colorées dans HTML
pour (var i = 0; i <dataint.data.length; i ++) {
var obox = document.CreateElement ("div");
obox.classname = "box";
extérieur.ApendChild (obox);
var opic = document.CreateElement ("div");
opic.classname = "pic";
obox.ApendChild (OPIC);
var oimg = document.CreateElement ("img");
oimg.src = "img /" + dataint.data [i] .src;
OPIC.APPENDCHILD (OIMG);
}
cascade («contenu», «boîte»);
}
}
}
fonction cascade (parent, boîte) {
// Sortez toutes les boîtes de classe sous contenu
var aparent = document.getElementById (parent);
var abox = getBClass (aparent, box);
// Obtenez la largeur de la boîte
var aboxw = abox [0] .offsetWidth;
// Utilisez la largeur du navigateur pour diviser la largeur de la boîte pour obtenir le nombre de colonnes
var cols = math.floor (document.DocumentElement.ClientWidth / Aboxw);
// définir la largeur et le centre du contenu
aparent.style.csstext = 'width:' + aboxw * cols + 'px; hauteur: auto; position: relative; marge: 0 auto; padding-droite: 15px ';
// Créer un tableau de hauteur pour chaque colonne
var harr = [];
pour (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
harr.push (abox [i] .offsetheight);
}autre{
var minh = math.min.apply (null, harr);
var index = getminindex (harr, minh); // découvrez la valeur d'index avec la hauteur la plus courte
//console.log(aboxw);
abox [i] .style.position = 'absolue';
abox [i] .style.top = Minh + 'px';
abox [i] .style.left = aboxw * index + 'px';
harr [index] + = abox [i] .offsetheight;
}
}
}
// Obtenez un élément en fonction de la classe
fonction getBClass (parent, className) {
var boxarr = new Array (); // utilisé pour stocker la classe obtenue
//console.log(parent.prototype);
ALLELENT = PARENT.GETELlementsByTAGName ('*');
pour (var i = 0; i <allèlement.length; i ++) {
if (allementation [i] .classname == className) {
boxarr.push (allementation [i]);
}
}
retour Boxarr;
}
// découvrez la valeur d'index la plus courte
fonction getminindex (arr, valeur) {
pour (var i dans arr) {
if (arr [i] == valeur) {
retour i;
}
}
}
// Créer une fonction qui détecte si le glissement de la roue est vrai ou non et renvoie vrai ou faux
Fonction Checkscroll () {
var Outdoor = document.getElementById ("Content");
var obox = getBClass (oparent, 'box');
var lastOxtOP = obox [obox.length-1] .offsetTop + math.floor (obox [obox.length-1] .offsetheight / 2);
//console.log(LastObOxtop);
var scrolltop = document.body.scrolltop || document.DocumentElement.scrollTop;
var height = document.body.clientHeight || document.DocumentElement.ClientHeight;
//console.log(scrollTop);
return (LastObOxtOP <ScrollTop + Height)? True: False;
}
Publié avec le fichier CSS
La copie de code est la suivante:
* {marge: 0; rembourrage: 0;}
corps {fond de fond: #eee;}
.contenu{
Position: relative;
}
.boîte{
rembourrage: 15px 0 0 15px;
flottant: à gauche;
}
.pic {
rembourrage: 10px;
Border: 1px solide #ccc;
Box-Shadow: 0 0 5px #cccccccc;
Border-Radius: 5px;
Contexte: #FFFF;
}
.pic img {
Largeur: 220px;
Hauteur: Auto;
Border: 1px solide #eee;
}
Publié dans le fichier html
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<Title> JavaScript Waterfall Flow </Title>
<link rel = "stylesheet" type = "text / css" href = "css / pubuli.css" />
<script type = "text / javascript" src = "js / my.js"> / script>
</ head>
<body>
<div id = "contenu">
<div>
<div>
<img src = "img / 01.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 02.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 03.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 04.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 05.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 06.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 07.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 08.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 09.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 10.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 11.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 12.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 13.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 14.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 15.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 16.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 17.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 18.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 19.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 20.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 21.jpg" />
</div>
</div>
<div>
<div>
<img src = "img / 22.jpg" />
</div>
</div>
</div>
</docy>
</html>
D'accord, merci d'avoir regardé. Je n'ai jamais écrit d'articles de partage technique auparavant. Il existe de nombreux aspects inconsidérés que j'espère que vous pourrez les corriger. Les petits novices qui apprennent le front-end donne y (^_^) y