html ((, 方便 js 调用)
复制代码代码如下 :
<body>
<div id = "main">
<div>
<div>
<img src = "images/0.jpg">
</div>
</div>
<div>
<div>
<img src = "images/1.jpg">
</div>
</div>
<div>
<div>
<img src = "images/2.jpg">
</div>
</div>
<div>
<div>
<img src = "images/3.jpg">
</div>
</div>
<div>
<div>
<img src = "images/4.jpg">
</div>
</div>
<div>
<div>
<img src = "images/2.jpg">
</div>
</div>
<div>
<div>
<img src = "images/3.jpg">
</div>
</div>
<div>
<div>
<img src = "images/4.jpg">
</div>
</div>
<div>
<div>
<img src = "images/5.jpg">
</div>
</div>
<div>
<div>
<img src = "images/6.jpg">
</div>
</div>
<div>
<div>
<img src = "images/7.jpg">
</div>
</div>
<div>
<div>
<img src = "images/3.jpg">
</div>
</div>
<div>
<div>
<img src = "images/4.jpg">
</div>
</div>
<div>
<div>
<img src = "images/5.jpg">
</div>
</div>
<div>
<div>
<img src = "images/3.jpg">
</div>
</div>
<div>
<div>
<img src = "images/4.jpg">
</div>
</div>
<div>
<div>
<img src = "images/5.jpg">
</div>
</div>
<div>
<div>
<img src = "images/6.jpg">
</div>
</div>
<div>
<div>
<img src = "images/7.jpg">
</div>
</div>
<div>
<div>
<img src = "images/3.jpg">
</div>
</div>
</div>
</body>
덜 (덜 预编译)
复制代码代码如下 :
* {
여백 : 0;
패딩 : 0;
}
#기본 {
위치 : 상대;
}
.상자 {
패딩 : 15px 0 0 15px;
플로트 : 왼쪽;
}
.pic {
패딩 : 10px;
국경 : 1px Solid #CCC;
Border-Radius : 5px;
Box-Shadow : 0px 0px 5px #ccc;
img {
너비 : 165px;
높이 : 자동;
}
}
자바 스크립트 (()
(函数存在一定瑕疵, 仅用于学习理解)
复制代码代码如下 :
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 ( "main");
for (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);
};
폭포 ( "메인", "상자");
// 将动态生成的数据块进行流式布局;
};
};
};
// 流式布局主函数, 流式布局主函数;
기능 폭포 (부모, 상자) {
// 将 Main 将 Box 元素取出; "Parent"代表父级, Box 代表 Box 元素;
var oparent = document.getElementById (부모);
// oparent;
var oboxs = getbyclass (Oparent, Box);
// 通过自定义函数, 通过自定义函数 Box 元素; 得到的是所有 Box 元素的集合;
// 再次将这个得到的 box 再次将这个得到的 oboxs; (因为作用域问题, 变量不 ff 用);
// console.log (oboxs.length);
// 在控制台中打印出 Box 在控制台中打印出, 用于调试;
var oboxw = oboxs [0] .OffSetWidth;
// 计算出每一列的宽度; offsetWidth 包含内边距在内的宽度;
// console.log (oboxw); 测试;
var cols = math.floor (document.documentElement.clientWidth/oboxw);
// 计算整个页面显示的列数 (计算整个页面显示的列数/box 的宽);
oparent.style.csstext = "너비 :"+oboxw*cols+"px; 마진 : 0 Auto";
// main main 父元素 = 每一列的宽*列数; 并且左右居中;
var harr = [];
// 存放每一列高度的数组;
for (var i = 0; i <oboxs.length; i ++) {
// 遍历 oboxs 数组;
if (i <cols) {
// 这里符合条件的是第一行的每列的第一个;
harr.push (oboxs [i] .offsetheight);
// 得出每一列的高度放入数组中;
}또 다른{
// 这里的 박스 这里的;
var minh = math.min.apply (null, harr);
// 得出第一行的最小高度并赋值给变量;
// console.log (minh);
var index = getMinHindex (Harr, Minh);
// 调用自定义函数获取这个变量的 인덱스 调用自定义函数获取这个变量的;
oboxs [i] .style.position = "절대";
oboxs [i] .style.top = minh+"px";
oboxs [i] .style.left = oboxw*index+"px";
// 设置当前元素的位置;
// 当前元素的 왼쪽 当前元素的 = 顶上的元素的 index 值*每列的宽度;
//oboxs]. style.left = oboxs [index] .offSetLeft+"px";
// 第二种获取当前元素的 왼쪽 第二种获取当前元素的;
// 此时在第 index 此时在第 Box 元素;
Harr [index]+= oboxs [i] .offsetheight;
// 每一列更新后的高度 = 每一列更新后的高度+后来添加的 Box 元素的高度;
};
};
};
// js 原生通过 클래스 获取元素;
기능 getByclass (부모, 클라나 이름) {
// class 通过; (在父级 부모 的容器下获取 클라나 이름 的元素;)
var boxarr = new Array ();
// 声明数组, 声明数组 클래스 为 为 박스 的元素;
var oolements = parent.getElementsByTagName ( "*")
// 声明变量用来存储此父元素下的所有子元素 (*);
for (var i = 0; i <oelements.length; i ++) {
// Olements;
if (orelements [i] .classname == claname) {
// calss 类与参数 클라나 이름 相同;
boxarr.push (orelements [i]);
// 则把遍历到的这个 Box 则把遍历到的这个 Boxarr 数组;
};
};
복귀 Boxarr;
// 调用数组后, 调用数组后, 遍历; 将得到的数组返回给调用的函数;
};
// 获取数组元素的 인덱스 获取数组元素的;
함수 getMinHindex (arr, val) {
// arr val; val 是当前元素;
for (var i in arr) {
// 从 0 从;
if (arr [i] == val) {
// 找到当前元素在数组中对应的 인덱스 找到当前元素在数组中对应的;
반환 i;
// 函数返回值即是当前元素的 인덱스 函数返回值即是当前元素的;
};
};
};
// 检测是否具备了滚动加载数据块的条件;
함수 CheckScrollSlide () {
var oparent = document.getElementById ( "main");
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+height)? true : false;
// 页面滚动的距离是否大于最后一个 박스 页面滚动的距离是否大于最后一个 오프셋 탑;
};
总结 ：
用瀑布流来展现照片再好不过了 用瀑布流来展现照片再好不过了, 下面是瀑布流 下面是瀑布流 (每一行的长度等于浏览器窗口的长度) 的一种实现方式 的一种实现方式, 也可以用 css3 实现 实现, 很简单, 谷歌一下你就知道。 谷歌一下你就知道。
我的思路大概是一张一张的图片插入 我的思路大概是一张一张的图片插入, 当这一行的图片保持长宽比例不变并且高度低于 250 时就完成一个了循环 时就完成一个了循环, 即这一行插入进去了,。。
然后进入下一个循环插入下一行。