图片瀑布流排序加一个位置多图轮询

最新推荐文章于 2024-05-23 19:27:34 发布
最新推荐文章于 2024-05-23 19:27:34 发布
阅读量1.3k 收藏
点赞数
文章标签： 图片 瀑布流 多图轮询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013085291/article/details/45919789
版权

这两天，要实现一个页面的预览，直接使用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，大家互相交流学习

zhyu071010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片轮询控件包
06-19
图片轮询控件是一种在网页或应用程序中展示多张图片并自动进行切换的效果，它能够以动态、有吸引力的方式呈现图像信息。在这个“图片轮询控件包”中，主要包含了一个名为“nivo-slider”的文件，这通常指的是Nivo ...
ImageView实现图片轮询
02-10
TranslateAnimation ta = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, -1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);...
微信小程序实现瀑布流格式的同时还需要按照排序排放
qq_41227106的博客
11-29 1224
瀑布流的格式在很多的APP和小程序都能看到，就是宽度固定，高度自适应的布局，例如小红书这种展示型的，我看过了小红书的官网，他主要是分为左右两列。这样直接使用float布局或者flex布局就可以了，把拿到的列表进行遍历，单数在左边，双数在右边 getImgList: function(imgList) { - let that = this - let rightImgList = ...
html、css 实现轮播图的静态样式
Zhangguohao666的博客
12-09 1万+
利用html、css实现轮播图（静态的，我只实现轮播图的基本样式）
基于Vue3实现图片瀑布流排序
最新发布
weixin_44416058的博客
05-23 1115
vue3+tailwindcss实现瀑布流组件
【博主推荐】html好看的图片轮播多种风格（源码）
xcLeigh
07-18 1万+
html好看的图片轮播，支持各种配置，html设计自定义图片轮播，html图片轮播，好看的图片轮播效果，html图片轮播带源码。
html+js写的图片轮寻
u010597493的博客
12-07 476
效果图<!DOCTYPE html> <html onclick="star(event)"> <head> <meta charset="utf-8"> <style type="text/css"> div{ border:1px solid red; width:60
Javascript模仿阿里云首页实现图片轮询效果
heirenheiren的专栏
08-25 6724
Insert title here .box {width: 1600px;height: 350px;border: solid 1px #CCC;padding: 5px;} .box .box1 {width: 1600px;height: 350px;position: relative;overflow: hidden;} .box .box1 .picbox {w
图片上传，多图上传
03-01
在IT领域，图片上传和多...总之，图片上传和多图上传功能涉及到前端交互设计、后端处理逻辑以及性能优化等多个方面。在实际开发中，我们需要综合考虑用户体验、安全性、效率等因素，选择合适的技术方案来实现这一功能。
C++MFC实现图片随机选中生成器
01-04
综上所述，"C++ MFC实现图片随机选中生成器"是一个结合了图形界面设计、事件处理、随机数生成和多线程等技术的项目，它不仅展示了MFC的强大功能，也为开发类似应用提供了基础框架和实现思路。在实际应用中，可以根据...
PLC1200对多个ModbusRtu设备快速轮询程序
04-29
西门子PLC1200中ModbusRtu通信中对多个设备和多个数据块的快速轮询程序，该程序中展示了3个设备的轮询。里面有详细的注释，可根据远程序进行优化。 适用PLC：西门子1200 编程工具：博图v17版本 通信方式：ModbusRtu...
图片轮询
zhihaizhen的博客
06-19 1547
一、导入包 href="" /> src=""> 二、样式定义 #slider { width: 600px; height: 402px; margin: 5px auto; background: url(images/loading.gif) no-repeat 50% 50%; } #slider img { height: 100%; widt
js实现瀑布流排序加载效果
海洋专栏
05-05 1036
瀑布流是一种比较适用于相册或图片管理站点，像现在百度图片都使用瀑布流效果，下面我来介绍向种实现 瀑布流实例。 方法一、js实现瀑布流排序 charset="utf-8" /> js实现瀑布流排序 http://www.3aj.cn/article/8449.html type="text/css"> *{ margin:0; padding:0;} body { font:1
jquery 轮询图片
ziweixinghello的专栏
06-06 2828
JS部分:      $(function(){       pictureCycle();       }     //首页轮换图片             var n = 0, count;         function pictureCycle() {         count = $("#flashmf a").length;         $("#fla
浅析瀑布流布局及其原理
weixin_42833042的博客
12-20 2万+
一、什么是瀑布流 很多时候我们会看到一些Vlog网站或者展示图片的网站，它们的图片明明每一张的高度大小都不同，但是却能自动地适应，排成一行一行地展示，并且下拉到底的时候，加载的图片也会自动适应，这就是瀑布流，比如下图。 ...
瀑布流布局 流式布局 不规则图文排列布局 微信小程序按顺序排列的瀑布流布局
Taurus_666
03-17 4570
微信小程序按顺序排列的瀑布流布局 首先我说一下，我的项目需求： 瀑布流布局排列 按照一定的顺序排列 图文结合 不好意思，跟大家分享下我的过程，不想看的直接跳过看最后， 起初的实现思路是： 1、由于图片是从后台获取的，大家都知道image 有一个bindload事件，就是图片加载完成，就是在图片加载完成后获取到该图片的高度，然后通过既定的宽度，算出图片的实际显示高度。 2、知道了图片的实际显示高...
多图上传以及多图排序的方法及流程详解
空白_回忆的博客
03-02 1万+
多图上传以及多图排序的方法及流程详解所用插件包打包下载CSDN地址：点这里1、选择多图上传插件：pluploader.full.min.js（此插件经过试用非常好用，比百度的webuploader好用太多，但是需要翻墙下载，为了大家方便，上面包里都有）2、用户选择多张图以后，该插件按队列，自动用ajax单张上传3、服务器端使用单张图片处理操作即可，保存完毕后返回一个图片在服务器的地址4、前端js在该
html中在一个页面内实现多张图片的轮流播放
热门推荐
KevinSilent的博客
07-09 2万+
主要功能是实现6张图片的轮流播放，牵扯到的核心知识点有函数的使用，document.getElementById()，document.getElementByClass();
自定义的图片轮询器ScrollView
深情小建
03-30 1526
一、不多说，老惯例先上图 二、使用自定义MyScrollView Ⅰ、调用MainActivity.java package net.dxs.myscrollview; import android.app.Activity; import android.os.Bundle; import android.widget.ImageView; public class

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值