В наши дни я видел, как учитель Эми использует JavaScript для реализации потока водопада, поэтому я следил за кодом. Я обнаружил, что подобное письмо может адаптироваться только к экрану только при загрузке в первый раз, а затем изменение размера окна не сможет адаптироваться.
Поэтому я подумал об использовании Window.Onresize, чтобы сделать функцию потока водопада свежую нагрузку для достижения цели.
Кода -копия выглядит следующим образом:
window.onload = function () {
// Функция потока водопада
Waterfall ('Content', 'Box');
// Моделируют загрузку данных
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 "}]}}}}}}}}}}}}}}}}}}}}}}}}}}
// При изменении размера экрана функция потока водопада будет повторно адаптирована.
window.onresize = function () {
// Waterfall ('Content', 'Box');
setTimeout (function () {waterfall ('content', 'box');}, 200);
}
window.onscroll = function () {
if (ceckscroll ()) {
var Outdoor = document.getElementById ('content');
// Добавить окрашенные данные в HTML
for (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createElement ("div");
obox.classname = "box";
Outdoor.AppendChild (obox);
var opic = document.createElement ("div");
opic.classname = "pic";
obox.appendchild (opic);
var oimg = document.createElement ("img");
oimg.src = "img/"+dataint.data [i] .src;
Opic.AppendChild (OIMG);
}
Waterfall ('Content', 'Box');
}
}
}
Это нормально, когда экран уменьшен, но из-за увеличения появляется ошибка
Я не видел, что вершина следующих нескольких столбцов не может вернуться.
Поэтому я открыл инструмент разработки, чтобы увидеть, что случилось.
В 5 -м Div не должно быть стиля. Это потому, что это было добавлено к нему, когда он сокращался, но он был увеличен, и это не очистило его, поэтому он появится, если оно будет сохранено. SO: я добавил предложение abox [i] .style.csstext = '' к функции потока водопада; так что каждый раз, когда я захожу, я очищаю стиль
Кода -копия выглядит следующим образом:
Функция водопада (родитель, коробка) {
// Установите все коробки классов в контент
var aparent = document.getElementById (родитель);
var abox = getBclass (апарент, коробка);
// Получить ширину коробки
var aboxw = abox [0] .OffSetWidth;
// Используйте ширину браузера, чтобы разделить ширину коробки, чтобы получить количество столбцов
var cols = math.floor (document.documentelement.clientwidth/aboxw);
// Установить ширину и центр контента
aparent.style.csstext = 'width:'+aboxw*cols+'px; высота: авто; положение: относительно; Полевая: 0 Авто; Право накладки: 15px ';
// Создать массив высоты для каждого столбца
var harr = [];
for (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
Harr.push (abox [i] .offsetheight);
}еще{
var minh = math.min.apply (null, harr);
var index = getminindex (Harr, minh); // Узнайте значение индекса с самой короткой высотой
//console.log(aboxw);
abox [i] .style.position = 'Absolute';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
harr [index]+= abox [i] .offsetheight;
}
}
}
Это решает ошибку, которая не может быть возвращена после сокращения, и может нормально адаптироваться
Наконец, я опубликовал весь JavaScript
Кода -копия выглядит следующим образом:
window.onload = function () {
// Функция потока водопада
Waterfall ('Content', 'Box');
// Моделируют загрузку данных
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 "}]}}}}}}}}}}}}}}}}}}}}}}}}}}
// При изменении размера экрана функция потока водопада будет повторно адаптирована.
window.onresize = function () {
// Waterfall ('Content', 'Box');
setTimeout (function () {waterfall ('content', 'box');}, 200);
}
window.onscroll = function () {
if (ceckscroll ()) {
var Outdoor = document.getElementById ('content');
// Добавить окрашенные данные в HTML
for (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createElement ("div");
obox.classname = "box";
Outdoor.AppendChild (obox);
var opic = document.createElement ("div");
opic.classname = "pic";
obox.appendchild (opic);
var oimg = document.createElement ("img");
oimg.src = "img/"+dataint.data [i] .src;
Opic.AppendChild (OIMG);
}
Waterfall ('Content', 'Box');
}
}
}
Функция водопада (родитель, коробка) {
// Установите все коробки классов в контент
var aparent = document.getElementById (родитель);
var abox = getBclass (апарент, коробка);
// Получить ширину коробки
var aboxw = abox [0] .OffSetWidth;
// Используйте ширину браузера, чтобы разделить ширину коробки, чтобы получить количество столбцов
var cols = math.floor (document.documentelement.clientwidth/aboxw);
// Установить ширину и центр контента
aparent.style.csstext = 'width:'+aboxw*cols+'px; высота: авто; положение: относительно; Полевая: 0 Авто; Право накладки: 15px ';
// Создать массив высоты для каждого столбца
var harr = [];
for (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
Harr.push (abox [i] .offsetheight);
}еще{
var minh = math.min.apply (null, harr);
var index = getminindex (Harr, minh); // Узнайте значение индекса с самой короткой высотой
//console.log(aboxw);
abox [i] .style.position = 'Absolute';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
harr [index]+= abox [i] .offsetheight;
}
}
}
// Получить элемент в соответствии с классом
Функция getBclass (родитель, classname) {
var boxarr = new Array (); // используется для хранения полученного класса
//console.log(parent.prototype);
alllement = parent.getelementsbytagname ('*');
for (var i = 0; i <alllement.length; i ++) {
if (alllement [i] .classname == classname) {
boxarr.push (alllement [i]);
}
}
вернуть босарр;
}
// Узнайте кратчайшее значение индекса
функция getMinindex (arr, value) {
для (var i in arr) {
if (arr [i] == value) {
вернуть я;
}
}
}
// Создать функцию, которая обнаруживает, правда ли скольжение колеса или нет и возвращает истинную или ложную
function checkscroll () {
var Outdoor = document.getElementById ("Content");
var obox = getBclass (oparent, 'box');
var lastoboxtop = 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+высота)? True: false;
}
Опубликовано в файле CSS
Кода -копия выглядит следующим образом:
*{маржа: 0; падки: 0;}
Body {foangy-color: #eee;}
.содержание{
позиция: относительно;
}
.коробка{
Заполнение: 15px 0 0 15px;
Плавание: осталось;
}
.pic {
Заполнение: 10px;
Граница: 1PX SOLID #CCC;
Box-Shadow: 0 0 5px #cccccccc;
граница радий: 5px;
Фон: #ffff;
}
.pic img {
Ширина: 220px;
Высота: Авто;
Граница: 1PX SOLID #EEE;
}
Опубликовано в HTML -файле
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8" />
<title> javascript Водопад поток </title>
<link rel = "styleSheet" type = "text/css" href = "css/pubuli.css"/>
<script type = "text/javascript" src = "js/my.js">/script>
</head>
<тело>
<div id = "content">
<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>
</body>
</html>
Хорошо, спасибо за просмотр. Я никогда раньше не писал технические статьи. Я надеюсь, что вы сможете исправить их. Маленькие новички, которые изучают фронт, дают y (^_^) y