照片墙 Html

最新推荐文章于 2024-07-27 23:01:21 发布

你东哥

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量1.8k

点赞数 2

分类专栏： Html 文章标签：照片墙

本文链接：https://blog.csdn.net/weixin_37619833/article/details/86711215

版权

本文介绍了如何创建一个照片墙效果，包括使用Css层叠样式进行美化，通过JQuery Script和JQuery Style进行交互设计，以及详细阐述处理函数和库引用的步骤。还提供了瀑布流布局和不同版本的实现文件，如css3版本和jquery版本。

摘要由CSDN通过智能技术生成

效果

效果如图

Css 层叠样式

* {
	margin: 0;
	padding: 0;
}
#main {
	position: relative;
	width: 100%;
}
.box {
	padding: 15px 0 0 15px;
	float: left;
}
.pic {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px #ccc;
}
.pic img {
	width: 165px;
	height: auto;
}

JQuery Script

$(window).on('load', function() {
	waterfall();
	var dataInt = {"data":[{"src":"o.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
	$(window).on('scroll',function(){
		if(checkScrollSlide){
			$.each(dataInt.data,function(key,value){
				console.log(value);
				var oBox=$('<div>').addClass('box').appendTo($('#main'));
				var oPic = $('<div>').addClass('pic').appendTo($(oBox));
				 $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(opic));
				// console.log($(value).attr('src'));
				

			})
			waterfall();
		}
	})


})
function checkScrollslide(){
	var $lastBox=$('#main>div').last();
	var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
	var scrollTop=$(window).scrollTop();
	var documentH = $(window).height();
	return (lastBoxDis<scrollTop+documentH)?true:false;

}
function waterfall(){
	var $boxs = $('#main>div');//找到所有main下面的一级div
	var w = $boxs.eq(0).outerWidth();//获取每一列的宽度，包括margin和padding
	var cols = Math.floor($(window).width()/w);//获取列数
	$('main').width(w*cols).css('margin','0','auto');
	var hArr = [];
	$boxs.each(function(index,value){
		var h=$boxs.eq(index).outerHeight();//找到index下标的然后获取他的高
		if(index<cols){
			hArr[index] = h;
		}else{
			var minH = Math.mim.apply(null,hArr);
			var minHIndex = $.inArray(minH,hArr);		
			$(value).css({
				'postion': 'absolute',
				'top': minH+'px',
				'left':minHIndex*w+'px'
			});
			hArr[minHIndex]+=$boxs.eq(index).outerHeight()

		}
	})
	console.log(hArr);


}

JQuery Style

#main{-wibkit-column-widht:202px;
	-moz-colum-width:202px;
	-o-column-width:202px;
	-ms-colum-width:202px;
	-webkit-column-count:6;
	-moz-column-count:6;
	-o-column-count:6;
	-ms-columncount:6;
}
.box{padding:10px 0 0 15px;}
.pic{
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	/*圆角的属性*/
	box-shadow: 0 0 5px #ccc;
	width:165px;
}
.pic img{
	display: block;
	width: 165px;
	height: auto; 
}

处理函数

window.function(){
	waterfall('main','box');
	var dataInt = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
	window.onscrolls=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);
				var oPic = document.createElement('div');
				oPic.className='pic';
				oBox.appendChild(oPic);
				var oImg = document.createElement('img');
				oImg.src = "images/"+dataInt.data[i].src;
				oPic.appendChild(oImg);
			}
			waterfall('main','box');
		}
	}
}
//检测是否具备加载数据块的条件
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);
	var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
	console.log(scrollTop);			
	var height = document.body.clientHeight || document.documentElement.clientHeight;
	console.log(height);
	return (lastBoxH<scrollTop+height)?true:false;

}

function waterfall(parent, box){
//将main下的所有class为box的元素取出来
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
console.log(oBoxs.length);
//计算整个页面显示的列数使用（页面宽度/box的宽）
var oBoxW = oBoxs[0].offsetWidth;
console.log(oBoxW);
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
console.log(cols);
//设置main的宽
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
var hArr=[];
for(var i=0; i<oBoxs.length;i++){
	if(i<=cols){
		hArr.push(oBoxs[i].offsetHeight);
	}else{
		var minH = Math.min.apply(null,hArr);
		console.log(minH);
		var index = getMinIndex(hArr,minH);
		oBoxs[i].style.position='absolute';
		oBoxs[i].style.top=minH+'px';
		oBoxs[i].style.left=oBoxW*index+'px';
		// oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';这两个都可以 
		hArr[index]+=oBoxs[i].offsetHeight;
	}
}
console.log(hArr);
}
function getMinIndex(arr,val){
	for(var i in arr){
		if(arr[i]==val){
			return i;
		}
	}
}
//根据class获取元素
function getByClass(parent,clsName){
	var boxArr = new Array();//用来存储所有class为box的元素
	var oElements = parent.getElementsByTagName('*');//就获取这个下所有的子元素
	for(var i = 0; i<oElements.length;i++){
		if(oElements[i].className == clsName){
			boxArr.push(oElements[i]);
		}
	}
	return boxArr;
}

库引用

jquery-1.9.1.min.js

瀑布流布局.html

<!DOCTYPE html>
<html>
<head>
	<title>瀑布流模型</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="main">
	<div class="box">
		<div class="pic">
			<img src="images/0.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/1.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/2.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/3.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/4.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<