لقد رأيت استخدام المعلم آمي لـ JavaScript لتنفيذ تدفق الشلال هذه الأيام ، لذلك تابعت الرمز. لقد وجدت أن الكتابة مثل هذا يمكن أن تتكيف فقط مع الشاشة عند التحميل لأول مرة ، ثم تغيير حجم النافذة لن يكون قادرًا على التكيف.
لذلك فكرت في استخدام نافذة
نسخة الكود كما يلي:
window.onload = function () {
// وظيفة تدفق الشلال
الشلال ("المحتوى" ، "المربع") ؛
// محاكاة تحميل البيانات
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 () {
// الشلال ("المحتوى" ، "المربع") ؛
setTimeOut (function () {waterfall ('content' ، 'box') ؛} ، 200) ؛
}
window.onscroll = function () {
if (checkscroll ()) {
var Outdoor = document.getElementById ('content') ؛
// أضف البيانات الملطخة إلى HTML
لـ (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) ؛
}
الشلال ("المحتوى" ، "المربع") ؛
}
}
}
لا بأس عندما يتم تقليل الشاشة ، ولكن يظهر خطأ من التكبير
لم أر أن الجزء العلوي من الأعمدة القليلة التالية لا يمكن أن يعود.
لذلك فتحت أداة التطوير لمعرفة ما حدث.
لا ينبغي أن يكون هناك أسلوب في Div الخامس. ذلك لأنه تمت إضافته إليه عندما كان يتقلص ، لكنه تم توسيعه ولم يمسحه ، لذلك سيظهر إذا تم الاحتفاظ به. لذلك: أضفت الجملة Abox [i] .style.csstext = '' إلى وظيفة تدفق الشلال ؛ لذلك في كل مرة أتيت فيها ، قمت بمسح الأسلوب
نسخة الكود كما يلي:
شلال الوظيفة (الأصل ، المربع) {
// قم بإخراج جميع صناديق الفصل تحت المحتوى
var aparent = document.getElementById (parent) ؛
var abox = getBclass (Aparent ، box) ؛
// احصل على عرض الصندوق
var aboxw = abox [0] .OffSetWidth ؛
// استخدم عرض المتصفح لتقسيم عرض المربع للحصول على عدد الأعمدة
var cols = math.floor (document.documentElement.clientwidth/aboxw) ؛
// قم بتعيين عرض ومركز المحتوى
Aparent.style.csstext = 'width:'+aboxw*cols+'px ؛ height: auto ؛ الموضع: النسبي ؛ الهامش: 0 Auto ؛ Padding-Right: 15px '؛
// إنشاء صفيف الارتفاع لكل عمود
var harr = [] ؛
لـ (var i = 0 ؛ i <abox.length ؛ i ++) {
abox [i] .style.csstext = '' ؛
إذا (أنا <cols) {
harr.push (abox [i] .offsetheight) ؛
}آخر{
var minh = math.min.apply (null ، harr) ؛
var index = getMinIndex (Harr ، minh) ؛ // اكتشف قيمة الفهرس بأقصر ارتفاع
//console.log(aboxw) ؛
abox [i]
abox [i] .style.top = minh+'px' ؛
abox [i] .style.left = aboxw*index+'px' ؛
harr [index]+= abox [i] .OffSetheight ؛
}
}
}
هذا يحل الخلل الذي لا يمكن إرجاعه بعد الانكماش ، ويمكنه التكيف بشكل طبيعي
أخيرًا ، نشرت JavaScript بأكمله
نسخة الكود كما يلي:
window.onload = function () {
// وظيفة تدفق الشلال
الشلال ("المحتوى" ، "المربع") ؛
// محاكاة تحميل البيانات
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 () {
// الشلال ("المحتوى" ، "المربع") ؛
setTimeOut (function () {waterfall ('content' ، 'box') ؛} ، 200) ؛
}
window.onscroll = function () {
if (checkscroll ()) {
var Outdoor = document.getElementById ('content') ؛
// أضف البيانات الملطخة إلى HTML
لـ (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) ؛
}
الشلال ("المحتوى" ، "المربع") ؛
}
}
}
شلال الوظيفة (الأصل ، المربع) {
// قم بإخراج جميع صناديق الفصل تحت المحتوى
var aparent = document.getElementById (parent) ؛
var abox = getBclass (Aparent ، box) ؛
// احصل على عرض الصندوق
var aboxw = abox [0] .OffSetWidth ؛
// استخدم عرض المتصفح لتقسيم عرض المربع للحصول على عدد الأعمدة
var cols = math.floor (document.documentElement.clientwidth/aboxw) ؛
// قم بتعيين عرض ومركز المحتوى
Aparent.style.csstext = 'width:'+aboxw*cols+'px ؛ height: auto ؛ الموضع: النسبي ؛ الهامش: 0 Auto ؛ Padding-Right: 15px '؛
// إنشاء صفيف الارتفاع لكل عمود
var harr = [] ؛
لـ (var i = 0 ؛ i <abox.length ؛ i ++) {
abox [i] .style.csstext = '' ؛
إذا (أنا <cols) {
harr.push (abox [i] .offsetheight) ؛
}آخر{
var minh = math.min.apply (null ، harr) ؛
var index = getMinIndex (Harr ، minh) ؛ // اكتشف قيمة الفهرس بأقصر ارتفاع
//console.log(aboxw) ؛
abox [i]
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) ؛
allelement = parent.getElementsByTagName ('*') ؛
لـ (var i = 0 ؛ i <allelement.length ؛ i ++) {
if (allelement [i] .classname == className) {
boxarr.push (allelement [i]) ؛
}
}
إرجاع Boxarr ؛
}
// اكتشف أقصر قيمة فهرس
وظيفة getMinIndex (ARR ، القيمة) {
لـ (var i in arr) {
if (arr [i] == value) {
العودة أنا.
}
}
}
// قم بإنشاء وظيفة تكتشف ما إذا كانت انزلاق العجلة صحيحة أم لا وتُرجع صحيحًا أو خطأ
وظيفة 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) ؛
العودة (LastOboxtOp <scrolltop+الارتفاع)؟ صحيح: خطأ ؛
}
تم نشره مع ملف CSS
نسخة الكود كما يلي:
*{الهامش: 0 ؛ حشو: 0 ؛}
الجسم {خلفية اللون: #EEE ؛}
.محتوى{
الموقف: قريب
}
.صندوق{
Padding: 15px 0 0 15px ؛
تعويم: اليسار.
}
.صورة{
الحشو: 10 بكسل ؛
الحدود: 1px الصلبة #CCC ؛
box-shadow: 0 0 5px #cccccccc ؛
الحدود الحدودية: 5px ؛
الخلفية: #ffff ؛
}
.
العرض: 220 بكسل ؛
الارتفاع: السيارات ؛
الحدود: 1 بكسل Solid #EEE ؛
}
تم نشره في ملف HTML
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<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 = "content">
<viv>
<viv>
<img src = "img/01.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/02.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/03.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/04.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/05.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/06.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/07.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/08.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/09.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/10.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/11.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/12.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/13.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/14.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/15.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/16.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/17.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/18.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/19.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/20.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/21.jpg"/>
</div>
</div>
<viv>
<viv>
<img src = "img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
حسنًا ، شكرًا لك على المشاهدة. لم أكتب مقالات مشاركة تقنية من قبل. هناك العديد من الجوانب غير المثيرة لآمل أن تتمكن من تصحيحها. المبتدئين الصغار الذين يتعلمون الواجهة الأمامية يعطون y (^^^) y