JavaScript ดั้งเดิม + ใช้การไหลของน้ำตกน้อยลง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-27 15:00:04

html (注意包裹关系, 方便 js 调用)

复制代码代码如下:

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

น้อยลง (น้อยกว่า预编译)

复制代码代码如下:

มาร์จิ้น: 0;

Padding: 0;

#หลัก {

ตำแหน่ง: ญาติ;

.กล่อง {

Padding: 15px 0 0 15px;

ลอย: ซ้าย;

.pic {

Padding: 10px;

ชายแดน: 1px Solid #CCC;

แนวชายแดน: 5px;

Box-shadow: 0px 0px 5px #ccc;

img {

ความกว้าง: 165px;

ความสูง: อัตโนมัติ;

JavaScript (自己理解的注解)

(函数存在一定瑕疵, 仅用于学习理解)

复制代码代码如下:

window.onload = function () {

น้ำตก ("หลัก", "กล่อง");

// 调用自定义函数; 作用于หลัก下的每一个กล่อง元素;

var dataint = {"data": [{"src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "6.jpg"}]}}

// 模拟 json 数据;

window.onscroll = function () {

if (checkscrollslide) {

// 调用自定义函数; 根据函数返回值确定滚动是否超出范围;

var oparent = document.getElementById ("หลัก");

สำหรับ (var i = 0; i <dataint.data.length; i ++) {

var obox = document.createelement ("div");

obox.className = "Box";

Oparent.AppendChild (Obox);

// 创建กล่อง块

var opic = document.createelement ("div");

opic.className = "pic";

Obox.AppendChild (OPIC);

// 创建 pic 块

var oimg = document.createElement ("IMG");

// 创建 img 元素

oimg.src = "images/"+dataint.data [i] .src;

// 设置图片引用;

OPIC.AppendChild (OIMG);

น้ำตก ("หลัก", "กล่อง");

// 将动态生成的数据块进行流式布局;

// 流式布局主函数, 自动调整数据块的位置;

Function Waterfall (Parent, Box) {

// 将หลัก下的所有กล่อง元素取出; "ผู้ปกครอง" 代表父级, กล่อง代表กล่อง元素;

var oparent = document.getElementById (ผู้ปกครอง);

// 将父级元素赋值给变量 oparent;

var oboxs = getByClass (oparent, box);

// 通过自定义函数, 获取父级下的每一个กล่อง元素; 得到的是所有กล่อง元素的集合;

// 再次将这个得到的กล่อง元素的集合赋值给 oboxs; (因为作用域问题, 变量不共用);

// console.log (oboxs.length);

// 在控制台中打印出กล่อง元素的数量, 用于调试;

var oboxw = oboxs [0] .offsetWidth;

// 计算出每一列的宽度; OffsetWidth 包含内边距在内的宽度;

// console.log (oboxw); 测试;

var cols = math.floor (document.documentelement.clientWidth/oboxw);

// 计算整个页面显示的列数 (页面宽/box 的宽);

oparent.style.csstext = "ความกว้าง:"+oboxw*cols+"px; margin: 0 auto";

// 父元素หลัก的宽度 = 每一列的宽*列数; 并且左右居中;

var harr = [];

// 存放每一列高度的数组;

สำหรับ (var i = 0; i <oboxs.length; i ++) {

// 遍历 oboxs 数组;

ถ้า (i <cols) {

// 这里符合条件的是第一行的每列的第一个;

harr.push (oboxs [i] .OffSetheight);

// 得出每一列的高度放入数组中;

}อื่น{

// 这里的กล่อง元素已经不是第一行的元素了;

var minh = math.min.apply (null, harr);

// 得出第一行的最小高度并赋值给变量;

// console.log (minh);

ดัชนี var = getMinhindex (Harr, minh);

// 调用自定义函数获取这个变量的ดัชนี值;

oboxs [i] .style.position = "สัมบูรณ์";

oboxs [i] .style.top = minh+"px";

oboxs [i] .style.left = oboxw*index+"px";

// 设置当前元素的位置;

// 当前元素的ซ้าย值 = 顶上的元素的ดัชนี值*每列的宽度;

//OBOXS [ฉันเหมือนกัน style.left = oboxs [ดัชนี] .offsetleft+"px";

// 第二种获取当前元素的ซ้าย值;

// 此时在第ดัชนี列添加了一个กล่อง元素;

harr [index]+= oboxs [i] .offsetheight;

// 每一列更新后的高度 = 每一列原来的高度+后来添加的กล่อง元素的高度;

// JS 原生通过คลาส获取元素;

ฟังก์ชั่น getByClass (parent, claname) {

// 通过คลาส获取元素; (在父级 parent 的容器下获取 claname 的元素;)

var boxarr = new Array ();

// 声明数组, 用来存储获取到的所有คลาส为กล่อง的元素;

var oElements = parent.getElementsByTagname ("*")

// 声明变量用来存储此父元素下的所有子元素 (*);

สำหรับ (var i = 0; i <oElements.length; i ++) {

// 遍历数组 oelements;

if (oElements [i] .className == Claname) {

// 如果数组中的某一个元素的 calss 类与参数 claname 相同;

boxarr.push (oelements [i]);

// 则把遍历到的这个 Box 元素归类到 Boxarr 数组;

กลับ Boxarr;

// 调用数组后, 经过一系列函数, 遍历; 将得到的数组返回给调用的函数;

// 获取数组元素的ดัชนี值;

ฟังก์ชั่น getMinhindex (arr, val) {

// arr 是父级数组; val 是当前元素;

สำหรับ (var i ใน arr) {

// 从 0 开始遍历;

if (arr [i] == val) {

// 找到当前元素在数组中对应的ดัชนี值;

กลับฉัน;

// 函数返回值即是当前元素的ดัชนี值;

// 检测是否具备了滚动加载数据块的条件;

ฟังก์ชั่น checkscrollslide () {

var oparent = document.getElementById ("หลัก");

var oboxs = getByClass (oparent, "box");

var lastboxh = oboxs [oboxs.length-1] .offsettop+math.floor (oboxs [oboxs.length-1] .offsetheight/2);

// 最后一个 Box 元素距离页面顶部的高度 (找到最后一个 box (oboxs.lenght-1) 的 Offsettop)+自身的一半;

var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;

// 浏览器滚动条滚动的距离;

// console.log (scrolltop);

var height = document.body.clientheight || document.documentelement.clientheight;

// 浏览器视口的高度;

// console.log (ความสูง);

return (lastboxh <scrolltop+ความสูง)? true: false;

// 页面滚动的距离是否大于最后一个 Box 元素的 Offsettop;

总结：

用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用 css3 实现，很简单很简单，谷歌一下你就知道。

我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于 250 时就完成一个了循环，即这一行插入进去了，。。

然后进入下一个循环插入下一行。