HTML (注意包裹关系 ، 方便 JS 调用)
复制代码代码如下:
<body>
<div id = "main">
<viv>
<viv>
<img src = "Images/0.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/1.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/2.JPG">
</div>
</div>
<viv>
<viv>
<img src = "الصور/3.JPG">
</div>
</div>
<viv>
<viv>
<img src = "Images/4.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/2.JPG">
</div>
</div>
<viv>
<viv>
<img src = "الصور/3.JPG">
</div>
</div>
<viv>
<viv>
<img src = "Images/4.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/5.jpg">
</div>
</div>
<viv>
<viv>
<img src = "Images/6.jpg">
</div>
</div>
<viv>
<viv>
<img src = "Images/7.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/3.JPG">
</div>
</div>
<viv>
<viv>
<img src = "Images/4.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/5.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/3.JPG">
</div>
</div>
<viv>
<viv>
<img src = "Images/4.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/5.jpg">
</div>
</div>
<viv>
<viv>
<img src = "Images/6.jpg">
</div>
</div>
<viv>
<viv>
<img src = "Images/7.jpg">
</div>
</div>
<viv>
<viv>
<img src = "الصور/3.JPG">
</div>
</div>
</div>
</body>
أقل (أقل 预编译)
复制代码代码如下:
* {
الهامش: 0 ؛
الحشو: 0 ؛
}
#رئيسي {
الموقف: قريب
}
.صندوق {
Padding: 15px 0 0 15px ؛
تعويم: اليسار.
}
.صورة {
الحشو: 10 بكسل ؛
الحدود: 1px الصلبة #CCC ؛
الحدود الحدودية: 5px ؛
Box-shadow: 0px 0px 5px #ccc ؛
IMG {
العرض: 165 بكسل ؛
الارتفاع: السيارات ؛
}
}
JavaScript (自己理解的注解)
(函数存在一定瑕疵 ، 仅用于学习理解)
复制代码代码如下:
window.onload = function () {
الشلال ("Main" ، "Box") ؛
// 调用自定义函数 ؛ 作用于 main 下的每一个 box 元素 ؛
var dataint = {"data": [{"src": "7.jpg"} ، {"src": "8.jpg"} ، {"src":
// 模拟 json 数据 ؛
window.onscroll = function () {
إذا (checkscrollslide) {
// 调用自定义函数 ؛ 根据函数返回值确定滚动是否超出范围 ؛
var oparent = document.getElementById ("main") ؛
لـ (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) ؛
// 创建 pic 块
var oimg = document.createElement ("img") ؛
// 创建 IMG 元素
oimg.src = "الصور/"+dataint.data [i] .src ؛
// 设置图片引用 ؛
Opic.AppendChild (OIMG) ؛
} ؛
الشلال ("Main" ، "Box") ؛
// 将动态生成的数据块进行流式布局 ؛
} ؛
} ؛
} ؛
// 流式布局主函数 ، 自动调整数据块的位置 ؛
شلال الوظيفة (الأصل ، المربع) {
// 将 main 下的所有 box 元素取出 ؛ "parent" 代表父级 ، box 代表 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 ؛ margin: 0 auto" ؛
// 父元素 main 的宽度 = 每一列的宽*列数 ؛ 并且左右居中 ؛
var harr = [] ؛
// 存放每一列高度的数组 ؛
لـ (var i = 0 ؛ i <oboxs.length ؛ i ++) {
// 遍历 oboxs 数组 ؛
إذا (أنا <cols) {
// 这里符合条件的是第一行的每列的第一个 ؛
harr.push (oboxs [i] .offsetheight) ؛
// 得出每一列的高度放入数组中 ؛
}آخر{
// 这里的 box 元素已经不是第一行的元素了 ؛
var minh = math.min.apply (null ، harr) ؛
// 得出第一行的最小高度并赋值给变量 ؛
// console.log (minh) ؛
var index = getMinHindex (Harr ، minh) ؛
// 调用自定义函数获取这个变量的 index 值 ؛
oboxs [i] .style.position = "absolute" ؛
oboxs [i] .style.top = minh+"px" ؛
oboxs [i] .style.left = oboxw*index+"px" ؛
// 设置当前元素的位置 ؛
// 当前元素的 left 值 = 顶上的元素的 index 值*每列的宽度 ؛
//oboxs budapi.
// 第二种获取当前元素的 اليسار 值 ؛
// 此时在第 index 列添加了一个 box 元素 ؛
harr [index]+= oboxs [i] .OffSetheight ؛
// 每一列更新后的高度 = 每一列原来的高度+后来添加的 box 元素的高度 ؛
} ؛
} ؛
} ؛
// JS 原生通过 class 获取元素 ؛
وظيفة getByclass (الوالد ، العشرية) {
// 通过 class 获取元素 ؛ (在父级 Parent 的容器下获取 Claname 的元素 ؛)
var boxarr = new array () ؛
// 声明数组 ، 用来存储获取到的所有 class 为 box 的元素 ؛
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 ؛
// 调用数组后 ، 经过一系列函数 ، 遍历 ؛ 将得到的数组返回给调用的函数 ؛
} ؛
// 获取数组元素的 index 值 ؛
وظيفة getMinhindex (ARR ، Val) {
// arr 是父级数组 ؛ val 是当前元素 ؛
لـ (var i in arr) {
// 从 0 开始遍历 ؛
if (arr [i] == val) {
// 找到当前元素在数组中对应的 index 值 ؛
العودة أنا.
// 函数返回值即是当前元素的 index 值 ؛
} ؛
} ؛
} ؛
// 检测是否具备了滚动加载数据块的条件 ؛
وظيفة 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 (الارتفاع) ؛
العودة (LastBoxh <scrolltop+الارتفاع)؟ صحيح: خطأ ؛
// 页面滚动的距离是否大于最后一个 box 元素的 Offsettop ؛
} ؛
： ：
用瀑布流来展现照片再好不过了 ， 下面是瀑布流 （每一行的长度等于浏览器窗口的长度） 的一种实现方式 ， 也可以用 css3 实现 ， 很简单 ， 谷歌一下你就知道。
我的思路大概是一张一张的图片插入 ， 当这一行的图片保持长宽比例不变并且高度低于 250 时就完成一个了循环 ， 即这一行插入进去了 ，。
然后进入下一个循环插入下一行。