这两天,要实现一个页面的预览,直接使用html中的一些浮动技术是无法实现的,最后感觉可以用一下图片瀑布流实现,花了一些时间,终于算是搞定了!
首先:效果差不多是这样:
下面是我的代码,这里面有网上的,和自己理解和需求要求而改动和新增的一些,我的注释写的非常清楚:
<%@page import="com.yh.util.FileUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 显示对应版本下面的运营位jsp -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--jQuery js-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<!--MiniUI-->
<link href="js/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css"/>
<script src="js/miniui/miniui.js" type="text/javascript"></script>
<script src="js/boot.js" type="text/javascript"></script>
<style type="text/css">
#flow-box{margin:20px auto; padding:0; position:relative}
#flow-box li{
position:absolute; list-style:none;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
-webkit-transition:opacity 500ms ease-in-out;
-moz-transition:opacity 500ms ease-in-out;
-o-transition:opaicty 500ms ease-in-out;
transition:opaicty 500ms ease-in-out;
}
</style>
<script type="text/javascript">
var fornum = 0 ; //总循环次数
var overnum = 0; //主要用来记录所有的图片是不是都已经onload成小图片了
var lenArr = new Array(); //专门存放高度
var widArr = new Array(); //专门存放宽度
//参数(允许的宽度,允许的高度,图片)
function DrawImage(iwidth,iheight,ImgD,i){
overnum++;
//根据图片的大小,来处理它显示的大小
var w=ImgD.offsetWidth;
var h=ImgD.offsetHeight;
if(w==368&&h==368){
iwidth=205;
iheight=205;
lenArr[i] = 205;
widArr[i] = 205;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"205","height":"205","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==367&&h==182){
iwidth=205;
iheight=100;
lenArr[i] = 100;
widArr[i] = 205;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"205","height":"100","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==367&&h==181){
iwidth=205;
iheight=100;
lenArr[i] = 100;
widArr[i] = 205;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"205","height":"100","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==181&&h==181){
iwidth=100;
iheight=100;
lenArr[i] = 100;
widArr[i] = 100;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"100","height":"100","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==181&&h==182){
iwidth=100;
iheight=100;
lenArr[i] = 100;
widArr[i] = 100;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"100","height":"100","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==181&&h==368){
iwidth=100;
iheight=205;
lenArr[i] = 205;
widArr[i] = 100;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"100","height":"205","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
if(w==740&&h==368){
iwidth=410;
iheight=205;
lenArr[i] = 205;
widArr[i] = 410;
$("#demo"+i+"").css({"background":"#FFF","overflow":"hidden","float":"left","width":"410","height":"205","border-radius":5});
$("#indemo"+i+"").css({"float":"left","width":"700%"});
$("#idemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
$("#ndemo"+i+"").css({"float":"left","background":"","overflow":"","width":""});
}
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
ImgD.width=iwidth;
ImgD.height=iheight;
}
//图片加载完成后执行(这样才能让下面的方法拿到IMG的宽高)
if(overnum==fornum){ //等所有的img都onload之后再运行(这种方法会让瀑布流函数方法运行多次,因为无法预知预览中是否存在多图,每个位置有多少张图)
flow(5,5);
overnum = 0;
}
}
function SetData(data) {
if (data.action == "preview") {
//跨页面传递的数据对象,克隆后才可以安全使用
data = mini.clone(data);
$.ajax({
type:'post',
url:'${pageContext.request.contextPath}/adsversionAction!preview.action',
data:{aname:'',versionid:data.versionid,pageIndex:0,pageSize:10},
success:function(result){
var res=mini.decode(result);
var str="";
var num = 0; //主要知道有几个位置是多图
var someimg = 0; //主要知道所有多图位置中的所有图片数量
var oneimg = 0; //只有一张图的位置所有图片的数量
var arraynum = ""; //定义字符串,主要用来存储每个多图li的ID
if(res==""){
str+="<center><h3>当前无内容</h3></center>";
}
else{
str+="<ul id='flow-box'>";
for(var i=0;i<res.length;i++){
oneimg++;
str += "<li>";
var array = res[i].imageurl.split(","); //把多张图片分割成数组
var newsrc = "";
var end = res[i].imageurl.substring(res[i].imageurl.length-3,res[i].imageurl.length); //判断是否是图片
if(end!="png" && end!="jpg" && end!="bmp"){
str +="<img οnlοad='DrawImage(0,0,this,"+i+")' src='<%=FileUtil.getSaveURL()%>upload/tv.png' οnerrοr='javascript:imgerror()'/>";
}else{
if(array.length>1){ //判断图片数量,如果是多张就默认取第一张显示
num++;
arraynum += i +",";
str +="<div id='demo"+i+"'>";
str +="<div id='indemo"+i+"'>";
str +="<div id='idemo"+i+"'>";
for(var j=0;j<array.length;j++){
someimg++;
str +="<img οnlοad='DrawImage(0,0,this,"+i+")' src='<%=FileUtil.getSaveURL()%>"+array[j]+"' οnerrοr='javascript:imgerror()' title='第"+(j+1)+"张' style='margin-left: 5px;'/>";
}
str +="</div>";
str +="<div id='ndemo"+i+"'></div>";
str +="</div>";
str +="</div>";
}else{
str +="<img οnlοad='DrawImage(0,0,this,"+i+")' src='<%=FileUtil.getSaveURL()%>"+res[i].imageurl+"' οnerrοr='javascript:imgerror()'/>";
}
}
str +="</li>";
}
str+="</ul>";
}
$("#by").html(str);
if(num>0){
var newarraynum = arraynum.substring(0,arraynum.length-1).split(",");
for(var x=0;x<newarraynum.length;x++){
jin(newarraynum[x]);
}
}
fornum = someimg*2 + (oneimg-num); //计算出加载加载所有图片的循环次数
}
});
}
}
//图片显示出错
function imgerror(){
$("#by").html("<center><h3>图片不存在或者已经被删除!</h3></center>");
}
<!-- 主要用来做多图轮循 -->
function jin(i){
var images = $('#idemo'+i+' img').length;
if(images >1) {
var speed=20;
var tab=document.getElementById("demo"+i+"");
var tab1=document.getElementById("idemo"+i+"");
var tab2=document.getElementById("ndemo"+i+"");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
}
}
//1、计算页面的宽度,计算出页面可放数据块的列数
function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距,mh是水平距离,mv是垂直距离
var w = document.documentElement.offsetWidth;//计算页面宽度
var ul = document.getElementById("flow-box");
var li = ul.getElementsByTagName("li");
//var iw = li[0].offsetWidth + mh;//计算数据块的宽度(其实完全可以事先定义比如这里的205px)
var iw=210;
var c = Math.floor(w / iw);//计算列数
ul.style.width = iw * c + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中
var ulwid=iw*c;
//2、将各个数据块的高、宽度尺寸记入数组中
var liLen = li.length;
// var lenArr = []; //专门存放高度
// var widArr = []; //专门存放宽度
// for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组
// lenArr.push(li[i].offsetHeight);
// widArr.push(li[i].offsetWidth);
// }
//3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。
var oArr = [];
var fornum = 0; //主要用来记录循环到第几遍了(配合i来判断当前li的准确index,给予准确的位置信息)
for (var i = 0; i < c; i++) {//把第一行排放好,并将每一列的高度记入数据oArr
if(fornum==1 && i==2){ //如果开始只循环了一遍i==2,证明前面是小图片
li[i].style.top = 0+ "px";
li[i].style.left = iw *(i-1) + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
}else{
li[i].style.top = 0+ "px";
li[i].style.left = iw * i + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
}
//根据图片的宽度<=标准宽度/2,来判断是小图片,让小图片不会占据一整个标准列宽度
if(li[i].offsetWidth<=iw/2 && li[i].offsetWidth+li[i+1].offsetWidth<=iw){
fornum++;
li[i+1].style.top = 0+ "px";
li[i+1].style.left = iw * i + li[i].offsetWidth +mh+ "px";
li[i+1].style.opacity = "1";
li[i+1].style["-moz-opacity"] = "1";
li[i+1].style["filter"] = "alpha(opacity=100)";
if(ulwid-iw*(i+1)>iw*i){ //最后一列的位置
li[i+2].style.top = 0+ "px";
li[i+2].style.left = iw*(i+1) + "px";
li[i+2].style.opacity = "1";
li[i+2].style["-moz-opacity"] = "1";
li[i+2].style["filter"] = "alpha(opacity=100)";
console.info(li[i+2]);
}
i++;
c++;
lenArr[i] = 100; //这个用于只要是遇到(181*182+181*368)组合成一列
}
//当列数大于开始计算出来的列数时 && 剩下的宽度>=标准列宽度 && 判断是大图片还是小图片,大图需要强制定义最后一列的位置,小图不需要
if(c-Math.floor(w / iw)>0 && ulwid-iw*(c-2)>=iw && li[c-1].offsetWidth+mh==iw){
//如果两张或大于两张以上的小图片在第一行,小图片也算是一列,一定要定义好最后一列的位置
li[c-1].style.top = 0+ "px";
li[c-1].style.left = iw*(c-2) + "px";
li[c-1].style.opacity = "1";
li[c-1].style["-moz-opacity"] = "1";
li[c-1].style["filter"] = "alpha(opacity=100)";
}
oArr.push(lenArr[i]);
}
//4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面,然后再更新该列的高度
var x = _getMinKey(oArr);//获取最短的一列的索引值(也就是那一列)
li[i].style.top = oArr[x] + mv + "px";
li[i].style.left = iw * x + "px";
li[i].style.opacity = "1";
li[i].style["-moz-opacity"] = "1";
li[i].style["filter"] = "alpha(opacity=100)";
//根据图片的宽度<=标准宽度/2,来判断是小图片,两张两者排着,而不是换行
//alert("i" + i);
//alert("widArr[i]" + widArr[i] + "widArr[i+1]" + widArr[i+1] );
if(widArr[i]<=iw/2 && i+1<liLen && widArr[i+1]<=iw/2){
li[i+1].style.top = oArr[x]+mv+ "px";
li[i+1].style.left = iw * x +widArr[i]+mh+ "px";
li[i+1].style.opacity = "1";
li[i+1].style["-moz-opacity"] = "1";
li[i+1].style["filter"] = "alpha(opacity=100)";
i++;
}
oArr[x] = lenArr[i] + oArr[x];//更新该列的高度
}
}
//获取数字数组最小值的索引
function _getMinKey(arr) {
var a = arr[0]; //取到第一块的高度
var b = 0;
for (var k in arr) {
if (arr[k] < a) {
a = arr[k];
b = k;
}
}
return b; //返回当前那一列高度最低
}
</script>
</head>
<body>
<div id="by">
<div align="center">
<img src="images/loading.gif" style="width: 150px;height: 150px;"/>
</div>
</div>
</body>
</html>
大家可以尝试一下,我在这边附上,给我帮助很大的一篇帖子地址,大家可以看看http://www.html5cn.org/article-4652-1.html,大家互相交流学习