Html (注意包裹关系, 方便 js 调用)
复制代码代码如下:
<Body>
<div id = "main">
<div>
<div>
<img src = "imágenes/0.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/1.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/2.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/3.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/4.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/2.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/3.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/4.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/5.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/6.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/7.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/3.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/4.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/5.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/3.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/4.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/5.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/6.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/7.jpg">
</div>
</div>
<div>
<div>
<img src = "imágenes/3.jpg">
</div>
</div>
</div>
</body>
Menos (menos 预编译)
复制代码代码如下:
* {
margen: 0;
relleno: 0;
}
#principal {
Posición: relativo;
}
.caja {
relleno: 15px 0 0 15px;
flotante: izquierda;
}
.pic {
relleno: 10px;
borde: 1px sólido #ccc;
Border-Radius: 5px;
shadow de caja: 0px 0px 5px #ccc;
img {
Ancho: 165px;
Altura: Auto;
}
}
JavaScript (自己理解的注解)
(函数存在一定瑕疵, 仅用于学习理解)
复制代码代码如下:
window.onload = function () {
cascada ("principal", "caja");
// 调用自定义函数; 作用于 Main 下的每一个 Box 元素;
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);
// 创建 Box 块
var opic = document.createElement ("div");
opic.classname = "pic";
OBOX.AppendChild (OPIC);
// 创建 foto 块
var oimg = document.createElement ("img");
// 创建 img 元素
oimg.src = "imágenes/"+dataint.data [i] .src;
// 设置图片引用;
OPIC.AppendChild (OIMG);
};
cascada ("principal", "caja");
// 将动态生成的数据块进行流式布局;
};
};
};
// 流式布局主函数, 自动调整数据块的位置;
Cascada de funciones (padre, caja) {
// 将 Main 下的所有 Box 元素取出; "Parent" 代表父级, caja 代表 Box 元素;
var oparent = document.getElementById (parent);
// 将父级元素赋值给变量 Oparent;
var oboxs = GetByClass (Oparent, Box);
// 通过自定义函数, 获取父级下的每一个 Box 元素; 得到的是所有 Box 元素的集合;
// 再次将这个得到的 Box 元素的集合赋值给 OBOXS; (因为作用域问题, 变量不 共 用);
// 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 = "width:"+oboxw*cols+"px; margen: 0 auto";
// 父元素 principal 的宽度 = 每一列的宽*列数; 并且左右居中;
var Harr = [];
// 存放每一列高度的数组;
para (var i = 0; i <oboxs.length; i ++) {
// 遍历 OBOXS 数组;
if (i <cols) {
// 这里符合条件的是第一行的每列的第一个;
harr.push (OBOXS [i] .Offsetheight);
// 得出每一列的高度放入数组中;
}demás{
// 这里的 Box 元素已经不是第一行的元素了;
var minh = math.min.apply (null, harr);
// 得出第一行的最小高度并赋值给变量;
// console.log (minh);
Var index = getminhindex (Harr, Minh);
// 调用自定义函数获取这个变量的 调用自定义函数获取这个变量的 调用自定义函数获取这个变量的 调用自定义函数获取这个变量的 值 值;
oboxs [i] .style.position = "Absolute";
oboxs [i] .style.top = minh+"px";
oboxs [i] .style.left = oboxw*índice+"px";
// 设置当前元素的位置;
// 当前元素的 Izquierda 值 = 顶上的元素的 índice 值*每列的宽度;
//OBOXS[iFont>.style.left = Oboxs [índice] .OffSetleft+"Px";
// 第二种获取当前元素的 izquierda 值;
// 此时在第 此时在第 列添加了一个 列添加了一个 box 元素;
Harr [índice]+= Oboxs [i] .Offsetheight;
// 每一列更新后的高度 = 每一列原来的高度+后来添加的 Box 元素的高度;
};
};
};
// JS 原生通过 Clase 获取元素;
función getByClass (parent, claname) {
// 通过 Clase 获取元素; (在父级 Padre 的容器下获取 Claname 的元素;)
var boxarr = new Array ();
// 声明数组, 用来存储获取到的所有 Clase 为 Box 的元素;
var oelements = parent.getElementsBytagName ("*")
// 声明变量用来存储此父元素下的所有子元素 (*);
para (var i = 0; i <oelements.length; i ++) {
// 遍历数组 oelementos;
if (oelements [i] .classname == claname) {
// 如果数组中的某一个元素的 Calss 类与参数 Claname 相同;
Boxarr.push (Oelements [i]);
// 则把遍历到的这个 Box 元素归类到 Boxarr 数组;
};
};
regresar Boxarr;
// 调用数组后, 经过一系列函数, 遍历; 将得到的数组返回给调用的函数;
};
// 获取数组元素的 获取数组元素的 获取数组元素的 获取数组元素的 值 值;
función getminhindex (arr, val) {
// arr 是父级数组; val 是当前元素;
para (var i en arr) {
// 从 0 开始遍历;
if (arr [i] == val) {
// 找到当前元素在数组中对应的 找到当前元素在数组中对应的 找到当前元素在数组中对应的 找到当前元素在数组中对应的 值 值;
regresar i;
// 函数返回值即是当前元素的 函数返回值即是当前元素的 函数返回值即是当前元素的 函数返回值即是当前元素的 值 值;
};
};
};
// 检测是否具备了滚动加载数据块的条件;
function 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 altura = document.body.clientHeight || document.documentelement.clientHeight;
// 浏览器视口的高度;
// console.log (altura);
return (lastboxh <scrolltop+altura)? Verdadero: falso;
// 页面滚动的距离是否大于最后一个 Box 元素的 Offsettop;
};
总结 ：
用瀑布流来展现照片再好不过了 ， 下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式 ， 也可以用 CSS3 实现 ， 很简单 谷歌一下你就知道。
我的思路大概是一张一张的图片插入 ， 当这一行的图片保持长宽比例不变并且高度低于 250 时就完成一个了循环 ， 即这一行插入进去了。
然后进入下一个循环插入下一行。