ฉันได้เห็นการใช้ JavaScript ของครูของ Amy เพื่อใช้การไหลของน้ำตกในวันนี้ดังนั้นฉันจึงติดตามรหัสออก ฉันพบว่าการเขียนแบบนี้สามารถปรับให้เข้ากับหน้าจอได้เมื่อโหลดเป็นครั้งแรกจากนั้นการเปลี่ยนขนาดหน้าต่างจะไม่สามารถปรับได้
ดังนั้นฉันจึงคิดว่าจะใช้หน้าต่างเพื่อให้การไหลของน้ำตกทำงานสดใหม่เพื่อให้บรรลุเป้าหมาย
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
// ฟังก์ชั่นการไหลของน้ำตก
น้ำตก ('เนื้อหา', '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 () {
// น้ำตก ('เนื้อหา', 'Box');
settimeout (function () {น้ำตก ('เนื้อหา', 'box');}, 200);
-
window.onscroll = function () {
if (checkscroll ()) {
var outernor = document.getElementById ('เนื้อหา');
// เพิ่มข้อมูลสีลงใน 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);
-
น้ำตก ('เนื้อหา', 'Box');
-
-
-
มันก็โอเคเมื่อหน้าจอลดลง แต่ข้อบกพร่องจะปรากฏขึ้นจากการซูมเข้า
ฉันไม่เห็นว่าด้านบนของคอลัมน์สองสามคอลัมน์ถัดไปไม่สามารถกลับมาได้
ดังนั้นฉันจึงเปิดเครื่องมือการพัฒนาเพื่อดูว่าเกิดอะไรขึ้น
ไม่ควรมีสไตล์ใน Div ที่ 5 เป็นเพราะมันถูกเพิ่มเข้ามาเมื่อมันหดตัว แต่มันขยายใหญ่ขึ้นและมันก็ไม่ชัดเจนดังนั้นมันจะปรากฏขึ้นถ้ามันถูกเก็บไว้ ดังนั้น: ฉันเพิ่มประโยค abox [i] .style.csstext = '' ลงในฟังก์ชั่นการไหลของน้ำตก; ดังนั้นทุกครั้งที่ฉันเข้ามาฉันก็ล้างสไตล์
การคัดลอกรหัสมีดังนี้:
Function Waterfall (Parent, Box) {
// นำกล่องคลาสทั้งหมดออกภายใต้เนื้อหา
var aparent = document.getElementById (ผู้ปกครอง);
var abox = getBclass (aparent, box);
// รับความกว้างของกล่อง
var aboxw = abox [0] .offsetWidth;
// ใช้ความกว้างของเบราว์เซอร์เพื่อแบ่งความกว้างของกล่องเพื่อรับจำนวนคอลัมน์
var cols = math.floor (document.documentelement.clientWidth/aboxw);
// ตั้งค่าความกว้างและศูนย์กลางของเนื้อหา
aparent.style.csstext = 'ความกว้าง:'+aboxw*cols+'px; ความสูง: auto; ตำแหน่ง: สัมพัทธ์; มาร์จิ้น: 0 auto; padding-right: 15px ';
// สร้างอาร์เรย์ความสูงสำหรับแต่ละคอลัมน์
var harr = [];
สำหรับ (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
ถ้า (i <cols) {
harr.push (abox [i] .OffSetheight);
}อื่น{
var minh = math.min.apply (null, harr);
ดัชนี var = getMinIndex (Harr, minh); // ค้นหาค่าดัชนีด้วยความสูงที่สั้นที่สุด
//console.log(aboxw);
abox [i] .style.position = 'สัมบูรณ์';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
harr [index]+= abox [i] .offsetheight;
-
-
-
สิ่งนี้จะช่วยแก้แมลงที่ไม่สามารถส่งคืนได้หลังจากหดตัวและสามารถปรับได้ตามปกติ
ในที่สุดฉันก็โพสต์ JavaScript ทั้งหมด
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
// ฟังก์ชั่นการไหลของน้ำตก
น้ำตก ('เนื้อหา', '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 () {
// น้ำตก ('เนื้อหา', 'Box');
settimeout (function () {น้ำตก ('เนื้อหา', 'box');}, 200);
-
window.onscroll = function () {
if (checkscroll ()) {
var outernor = document.getElementById ('เนื้อหา');
// เพิ่มข้อมูลสีลงใน 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);
-
น้ำตก ('เนื้อหา', 'Box');
-
-
-
Function Waterfall (Parent, Box) {
// นำกล่องคลาสทั้งหมดออกภายใต้เนื้อหา
var aparent = document.getElementById (ผู้ปกครอง);
var abox = getBclass (aparent, box);
// รับความกว้างของกล่อง
var aboxw = abox [0] .offsetWidth;
// ใช้ความกว้างของเบราว์เซอร์เพื่อแบ่งความกว้างของกล่องเพื่อรับจำนวนคอลัมน์
var cols = math.floor (document.documentelement.clientWidth/aboxw);
// ตั้งค่าความกว้างและศูนย์กลางของเนื้อหา
aparent.style.csstext = 'ความกว้าง:'+aboxw*cols+'px; ความสูง: auto; ตำแหน่ง: สัมพัทธ์; มาร์จิ้น: 0 auto; padding-right: 15px ';
// สร้างอาร์เรย์ความสูงสำหรับแต่ละคอลัมน์
var harr = [];
สำหรับ (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
ถ้า (i <cols) {
harr.push (abox [i] .OffSetheight);
}อื่น{
var minh = math.min.apply (null, harr);
ดัชนี var = getMinIndex (Harr, minh); // ค้นหาค่าดัชนีด้วยความสูงที่สั้นที่สุด
//console.log(aboxw);
abox [i] .style.position = 'สัมบูรณ์';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
harr [index]+= abox [i] .offsetheight;
-
-
-
// รับองค์ประกอบตามชั้นเรียน
ฟังก์ชั่น getBclass (parent, 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 (อัลลีน [i]);
-
-
กลับ Boxarr;
-
// ค้นหาค่าดัชนีที่สั้นที่สุด
ฟังก์ชั่น getMinIndex (arr, value) {
สำหรับ (var i ใน arr) {
if (arr [i] == ค่า) {
กลับฉัน;
-
-
-
// สร้างฟังก์ชั่นที่ตรวจพบว่าการเลื่อนล้อนั้นเป็นจริงหรือไม่และส่งคืนจริงหรือเท็จ
ฟังก์ชั่น checkscroll () {
var outernor = document.getElementById ("เนื้อหา");
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
การคัดลอกรหัสมีดังนี้:
*{margin: 0; padding: 0;}
ร่างกาย {พื้นหลังสี: #eee;}
.เนื้อหา{
ตำแหน่ง: ญาติ;
-
.กล่อง{
Padding: 15px 0 0 15px;
ลอย: ซ้าย;
-
.pic {
Padding: 10px;
ชายแดน: 1px Solid #CCC;
Box-Shadow: 0 0 5px #CCCCCCCC;
แนวชายแดน: 5px;
ความเป็นมา: #FFFF;
-
.Pic img {
ความกว้าง: 220px;
ความสูง: อัตโนมัติ;
ชายแดน: 1px Solid #EEE;
-
โพสต์ใน ไฟล์ HTML
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<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>
<body>
<div id = "เนื้อหา">
<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