HTML5仿素材网的瀑布流设计

HTML5 herman 3828浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领
瀑布流,又称瀑布流式布局,布局模式和瀑布很相像而得名。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

国内这样的网站有很多。像素材网,一些电商网站等都采用这类布局方式。为了揭开瀑布流模式的设计,我今天就为大家介绍两种常见的做法。

方案一:使用jQuery的Masonry插件进行制作。代码如下: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Masonry瀑布流</title>
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>
    <style>
	.container-fluid {
            padding: 20px;
        }
        .box {
            margin-bottom: 20px;
            float: left;
            width: 220px;
        }
        .box img {
            max-width: 100%
        }
    </style>
</head>
<body>
    <div id="masonry" class="container-fluid">
        <div class="box"><img src="1.jpg"></div>
        <div class="box"><img src="2.jpg"></div>
        <div class="box"><img src="3.jpg"></div>
        <div class="box"><img src="4.jpg"></div>
        <div class="box"><img src="5.jpg"></div>
    </div>
    <script>
		$(function() {
			var $objbox = $("#masonry");
			var gutter = 25;
			var centerFunc, $top0;
			$objbox.imagesLoaded(function() {
				$objbox.masonry({
					itemSelector: "#masonry > .box",
					gutter: gutter,
					isAnimated: true
				});
				centerFunc = function() {
					$top0 = $objbox.children("[style*='top: 0']");
					$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
				};
				centerFunc();
			});
			var tur = true;
			$(window).resize(function() {
				if (tur) {
					setTimeout(function() {
						tur = true;
						centerFunc();
					},
					1000);
					tur = false;
				}
			});
		});
	</script>
</body>
</html>

方案二:自己实现,不使用插件的方式。代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义瀑布流</title>
	<style>
		body{
			margin: 0px;
			background: darkgray;
		}
		.container{
			position: relative;
		}
		.box{
			padding: 5px;
			float: left;
		}
		.box_border{
			padding: 5px;
			border: 1px solid #cccccc;
			box-shadow: 0px 0px 5px #ccc;
			border-radius: 5px;
		}
		.box_border img{
			width: 150px;
			height: auto;
		}
	</style>
</head>
<body>
    <div class="container" id="container">
        <div class="box_border" id="box_border">

            <div class="box" id="box1">
                <img src="image/01.jpg">
            </div>
			<div class="box" id="box1">
                <img src="image/01.jpg">
            </div>
			<div class="box" id="box1">
                <img src="image/01.jpg">
            </div>
			......
        </div>
    </div>
	<script>
		window.onload = function() {
			var cparent = document.getElementById("container");
			setImgLocation(cparent);
			//设置加载的图片
			var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg",
				"image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];
			window.onscroll = function () {
				if (checkLoad(cparent)) {
					for (var i = 0; i < data.length; i++) {
						//创建新的节点
						var div1 = document.createElement("div");
						div1.className = "box";
						var div2 = document.createElement("div");
						div2.className = "box_border";
						var img = document.createElement("img");
						img.className = ".box_border img";
						img.src = data[i];
						div2.appendChild(img);
						div1.appendChild(div2);
						cparent.appendChild(div1);
					}
					setImgLocation(cparent);
				}
			}
		}
		function checkLoad(cparent){
			var childArray = getChildNodes(cparent);
			var lastImgHight = childArray[childArray.length-1].offsetTop;
			var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
			var browserHeight = document.documentElement.clientHeight;
			if(lastImgHight < scrollHeight+browserHeight){
				return true;
			}else {
				return false;
			}
		}
		function setImgLocation(cparent){
			var childArray = getChildNodes(cparent),
				imgWidth = childArray[0].offsetWidth,
				browserWidth = document.documentElement.clientWidth,
				count = Math.floor(browserWidth/imgWidth);
			cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";
			var imgHArray = [];
			for(var i=0;i<childArray.length;i++){
				if(i<count){
					imgHArray[i] = childArray[i].offsetHeight;
				}else{
					var minHeight = Math.min.apply(null,imgHArray),
					minIndex = getMinIndex(minHeight,imgHArray);
					childArray[i].style.position = "absolute";
					childArray[i].style.top = minHeight+"px";
					childArray[i].style.left = childArray[minIndex].offsetLeft+"px";
					imgHArray[minIndex] += childArray[i].offsetHeight;
				}

			}

		}
		function getMinIndex(mHeight,imgHArray){
			for(var i in imgHArray){
				if(imgHArray[i] == mHeight)
					return i;
			}
		}
		function getChildNodes(parent){
			var chArray =[];
			var tempNodes = parent.getElementsByTagName("*");
			for(var i = 0;i<tempNodes.length;i++){
				if(tempNodes[i].className == "box"){
					chArray.push(tempNodes[i]);
				}
			}
			return chArray;
		}
	</script>
</body>
</html>

效果如图片所示!睡觉了,就分享到这里!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5仿素材网的瀑布流设计