瀑布流

最新推荐文章于 2024-04-18 20:14:11 发布

hahalang-

最新推荐文章于 2024-04-18 20:14:11 发布

阅读量842

点赞数

分类专栏： js 文章标签： html css 结构 jquery

本文链接：https://blog.csdn.net/sinat_40697723/article/details/79771433

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.先将html结构写好，接着写css样式。

注：

1.容器的宽度和高度要设置为自动。

2.为通配符和图片设置border:none;的目的是为了防止老版本的ie浏览器会给图片增加一个边框。

3.在样式设置是学会了一个新知识点：box-sizing,默认属性是content-box,另外一个属性是border-box。box-sizing:content-box;这么理解：盒子的尺寸是内容的宽和高；box-sizing:border-box;这么理解：盒子的宽高包括了从边框开始到内容的宽高.

2.编写js思路：
1:首先通过获取盒子宽度和视口宽度得到列数，从而通过列数*盒子宽度得到容器的宽度，这样设置了容器宽度以后容器变居中了。
2：接着定义追加盒子效果函数。由于我们一开始只有18个盒子，显得效果不明显，所以我们通过JSON来创建一个虚拟数据。接着通过获取for(in)来遍历data里面的数据，将其按照一定顺序插入到wrap的盒子后面，然后继续调用waterfall函数（注：此时boxes应该换成wrap.children('div'),因为一开始的boxes只是原始的18个盒子）。
3：定义追加样式函数。目的是消除滚轮滚动时页面闪动。
4：定义判断追加盒子效果的函数（即2），目的是使滚轮滚动后面显示的图片有闪现的效果。此处的关键判定条件是：视口的宽度+滚轮滚动的距离>=盒子的TOP+盒子的高度的时候让盒子开始追加。

5：最后通过给图片追加一个划过改变透明度的效果让用户体验更好。

这是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="331.css">
</head>
<body>
	<div id="wrap">
		<div>
        <img src="images/1.png">
        <a href="http://www.imooc.com" target="_blank">第一怪 竹筒当烟袋</a>
    </div>
    <div>
        <img src="images/2.png">
        <a href="http://www.imooc.com" target="_blank">第二怪 草帽当锅盖</a>
    </div>
    <div>
        <img src="images/3.png">
        <a href="http://www.imooc.com" target="_blank">第三怪 这边下雨那边晒</a>
    </div>
    <div>
        <img src="images/4.png">
        <a href="http://www.imooc.com" target="_blank">第四怪 四季服装同穿戴</a>
    </div>
    <div>
        <img src="images/5.png">
        <a href="http://www.imooc.com" target="_blank">第五怪 火车没有汽车快</a>
    </div>
    <div>
        <img src="images/6.png">
        <a href="http://www.imooc.com" target="_blank">第六怪 火车不通国内通国外</a>
    </div>
    <div>
        <img src="images/7.png">
        <a href="http://www.imooc.com" target="_blank">第七怪 老奶爬山比猴快</a>
    </div>
    <div>
        <img src="images/8.png">
        <a href="http://www.imooc.com" target="_blank">第八怪 鞋子后面多一块</a>
    </div>
    <div>
        <img src="images/9.png">
        <a href="http://www.imooc.com" target="_blank">第九怪 脚趾四季露在外</a>
    </div>
    <div>
        <img src="images/10.png">
        <a href="http://www.imooc.com" target="_blank">第十怪 鸡蛋拴着卖</a>
    </div>
    <div>
        <img src="images/11.png">
        <a href="http://www.imooc.com" target="_blank">第十一怪 粑粑叫饵块</a>
    </div>
    <div>
        <img src="images/12.png">
        <a href="http://www.imooc.com" target="_blank">第十二怪 花生蚕豆数着卖</a>
    </div>
    <div>
        <img src="images/13.png">
        <a href="http://www.imooc.com" target="_blank">第十三怪 三个蚊子一盘菜</a>
    </div>
    <div>
        <img src="images/14.png">
        <a href="http://www.imooc.com" target="_blank">第十四怪 四个老鼠一麻袋</a>
    </div>
    <div>
        <img src="images/15.png">
        <a href="http://www.imooc.com" target="_blank">第十五怪 树上松毛扭着卖</a>
    </div>
    <div>
        <img src="images/16.png">
        <a href="http://www.imooc.com" target="_blank">第十六怪 姑娘叫老太</a>
    </div>
    <div>
        <img src="images/17.png">
        <a href="http://www.imooc.com" target="_blank">第十七怪 小和尚可以谈恋爱</a>
    </div>
    <div>
        <img src="images/18.png">
        <a href="http://www.imooc.com" target="_blank">第十八怪 背着娃娃谈恋爱</a>
    </div>
	</div>
	<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript" src="331.js"></script>
</body>
</html>

这是CSS代码：

*{
	margin: 0;
	padding: 0;
	border: 0;
}
body{
	background-color: #ddd;
}
#wrap{
	position: relative;
	width: auto;
	height: auto;
	margin: 0 auto;	
}
a{
    text-decoration: none;
    color: #444;
}
a:hover{
	color: #999;
}
#wrap div{
	float: left;
	width: 280px;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	margin: 10px;
	background-color: #fff;
}
#wrap div img{
	width: 100%;
}
#wrap div a{
	display: block;
	text-align: center;
	font-size: 18px;
	line-height: 40px;	
}

这是JS代码：

//定义虚拟数据
var data=[{
	"src":"1.png",
	"title":"第一怪 竹筒当烟袋"
},{
	"src":"2.png",
	"title":"第二怪 草帽当锅盖"
},{
	"src":"3.png",
	"title":"第三怪 这边下雨那边晒"
},{
	"src":"4.png",
	"title":"第四怪 四季服装同穿戴"
}, {
    "src": "5.png",
    "title": "第五怪 火车没有汽车快"
}, {
    "src": "6.png",
    "title": "第六怪 火车不通国内通国外"
}, {
    "src": "7.png",
    "title": "第七怪 老奶爬山比猴快"
}, {
    "src": "8.png",
    "title": "第八怪 鞋子后面多一块"
}, {
    "src": "9.png",
    "title": "第九怪 脚趾四季露在外"
}, {
    "src": "10.png",
    "title": "第十怪 鸡蛋拴着卖"
}, {
    "src": "11.png",
    "title": "第十一怪 粑粑叫饵块"
}, {
    "src": "12.png",
    "title": "第十二怪 花生蚕豆数着卖"
}, {
    "src": "13.png",
    "title": "第十三怪 三个蚊子一盘菜"
}, {
   "src": "14.png",
   "title": "第十四怪 四个老鼠一麻袋"
}, {
    "src": "15.png",
    "title": "第十五怪 树上松毛扭着卖"
}, {
    "src": "16.png",
    "title": "第十六怪 姑娘叫老太"
}, {
    "src": "17.png",
    "title": "第十七怪 小和尚可以谈恋爱"
}, {
    "src": "18.png",
    "title": "第十八怪 背着娃娃谈恋爱"
}];

//定义一个瀑布流函数
function waterfall(wrap,boxes){
    var boxesWidth=boxes.eq(0).outerWidth(true);
    var windowWidth=$(window).width();
    var colsNumber=Math.floor(windowWidth/boxesWidth);
    //为容器设置宽度
    wrap.width(colsNumber*boxesWidth);
    //定义一个数组保存每一列的高度
    var everyHeight=[];
    for(var i=0;i<boxes.length;i++){
        if (i<colsNumber) {
    	    everyHeight[i]=boxes.eq(i).outerHeight(true);
        }else{
    	    var minHeight=Math.min.apply(null,everyHeight);
    	    var minIndex=getIndex(everyHeight,minHeight);
    	    var leftValue=boxes.eq(minIndex).position().left;
    	    //添加定位
    	    setStyle(boxes.eq(i),minHeight,leftValue,i);
            everyHeight[minIndex]+=boxes.eq(i).outerHeight(true);
        }
        boxes.eq(i).hover(function(){
        	$(this).stop().animate({
                "opacity":0.3
        	},500)
        },function(){
        	$(this).stop().animate({
        		"opacity":1
        	})
        })
    }
}

//获取最低高度的索引
function getIndex(everyHeight,minHeight){
	for(index in everyHeight){
		if (everyHeight[index]===minHeight) return index;
	}
}
//定义判断追加效果的条件
function getBox(wrap){
	var dHeight=$(window).height();
	var sHeight=$(window).scrollTop();
	var boxes=wrap.children('div');
	var boxHeight=boxes.eq(boxes.length-1).height()+20;
	var boxTop=boxes.eq(boxes.length-1).offset().top;
	return dHeight+sHeight>=boxHeight+boxTop?true:false;
}

//定义追加样式
var startNumber=0;
function setStyle(box,top,left,index){
    if (startNumber>=index) {
    	return false;
    }else{
        box.css({
        	"position":"absolute",
    	    "top":top,
    	    "left":left,
    	    "opacity":0
        }).stop().animate({
    	    "opacity":1
    	},500)
    	startNumber=index;
    }
}

//定义追加效果函数
function addBoxes(wrap){
	if(getBox(wrap)){
	    for(i in data){
		    var innerString='<div><img src="images/'+ data[i].src +'"><a href="http://www.imooc.com" target="_blank">'+ data[i].title +'</a></div>'
		    wrap.append(innerString);
	    }
    }else{
    	return false;
    }
	waterfall(wrap,wrap.children('div'));
}

$(function(){
    var wrap=$('#wrap');
    var boxes=$('#wrap').children('div');
    waterfall(wrap,boxes);
    //追加效果
    $(this).scroll(function(){
    	addBoxes(wrap);
    })
})

新手小白，有不足之处请谅解。

hahalang-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流

1.先将html结构写好，接着写css样式。注： 1.容器的宽度和高度要设置为自动。 2.为通配符和图片设置border:none;的目的是为了防止老版本的ie浏览器会给图片增加一个边框。 3.在样式设置是学会了一个新知识点：box-sizing,默认属性是content-box,另外一个属性是border-box。box-sizing:content-box;这么理...
复制链接

扫一扫