瀑布流
注意：笔者此种方式需要图片宽度一致，高度可不一。
瀑布流效果
GIF.gif
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#box{
width: 90%;
margin: 20px auto;
}
#box ul{
list-style: none;
float: left;
width: 24%;
margin: 5px;
}
#box ul img{
width: 100%;
margin: 5px;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
var ulArr = document.querySelectorAll("ul");
//count表示一共有多少张图片
function createImg(count){
for(var i = 0; i < count; i++){
//创建图片和li
var img = document.createElement("img");
//根据图片下标来命名方便加载图片
img.src = "img/"+i+".jpg";
//每创建一个img就创建一个li
var li = document.createElement("li");
//li包裹img图片
li.appendChild(img);
//假设一个最短的ul
var minHeightUl = ulArr[0];
//循环四个ul的长度
for (var j = 0 ;j < ulArr.length;j++){
//如果那个li的高度最短
if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
//当前最短的li赋值给minHeightUl
minHeightUl = ulArr[j];
}
}
//在最短的ul中插入li
minHeightUl.appendChild(li);
}
}
createImg(32)
</script>
</body>
</html>
懒加载
运行效果如下
GIF.gif
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
img{
width: 100%;
height: 160px;
/* 以下样式是为了做渐变效果 */
opacity: 0;
transition: opacity 2s;
}
img[src]{
opacity: 1;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
/*
* 图片懒加载的思路
* 1、提前给所有图片设置宽和高用来占位
* 2、不设置图片的src属性，而是自定义一个data-src属性来存储图片的路径
* 3、判断当前屏幕的位置（图片的top值和屏幕底部的值），来进行是否显示
* 图片，如果需要显示的话，把data-src的值给src
*/
//获取所有图片
var imgs = document.querySelectorAll("img");
//设置滚动事件
window.onscroll = lazyloadFn;
//屏幕的高度
var sh = window.innerHeight;
console.log(sh);
//刚进来需要先调用下
lazyloadFn();
//图片懒加载的方法
function lazyloadFn () {
//获取滚动的距离
var st = document.body.scrollTop;
//计算滚动中的底部的值
var sn = sh + st;
//循环所有的图片
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].offsetTop <= sn) {
imgs[i].src = imgs[i].getAttribute("data-src");
}
}
}
</script>
</body>
</html>
箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明常见的页面效果整理（瀑布流、懒加载）！