图片瀑布流、含分享及分页

最新推荐文章于 2024-08-06 09:16:49 发布
最新推荐文章于 2024-08-06 09:16:49 发布
阅读量229 收藏
点赞数
分类专栏： 个人代码 文章标签： web 前端 瀑布流 JavaScript Ajax ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17835/article/details/82487143
版权



 1、需要在环境下运行

2、支持分享功能

3、每五页为一节点，加入分页。

 

有什么错误，多指教

去吧，黛杩
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="common.css"/>
<link rel="stylesheet" type="text/css" href="pic_wall.css"/>
<title>滚动图片墙</title>
</head>

<body>
<div class="pic_wall" id="container">
    <div class="wall_list first"> 
        
    </div>
    <div class="wall_list"> 
        
    </div>
    <div class="wall_list"> 
    </div>
    <div class="clearing"></div>
</div>

 
<!--分页开始-->
<div class="list_page">
    <div class="lp_main hidden">
        <a href="pic_wall.html" class="page_element lp_home">首页</a>
        <a href="pic_wall.html" class="page_element lp_pageUp">上一页</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">1</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">2</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">3</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">4</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">5</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">6</a>
        <a href="pic_wall.html" class="page_element lp_pageDown">下一页</a>
        <a href="pic_wall.html" class="page_element lp_end">尾页</a>
        <div class="clearing"></div>
    </div>
</div>
<!--分页结束-->

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/wall.js" type="text/javascript"></script>
<script src="js/core.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#text=%E5%88%86%E4%BA%AB&style=999&img=http%3a%2f%2f192.168.1.29:8080%2fcatcool%2fresources%2ftheme%2fdefault%2fimages%2fbshare.gif&h=18&w=67&=true" ></script> 

<script type="text/javascript">

	
	  var li = '';
	  var opt={
		  uri : 'test.jsp',
		  auto_imgHeight:true, //是否需要自动计算图片的高度
		  insert_type:1,  //单元格插入方式，1为插入最短那列，2为按序轮流插入
		  callback : function(json){//构造html
			  var	htmls ="";
			  var obj = eval(json);
			  
			  for(var i=0;i<obj.length;i++){
				  var html_son="";
				  var obj_son = eval(obj[i].userList);
					for(var k=0;k<obj_son.length;k++){
					  html_son=html_son+"<li><a href='"+obj_son[k].user_href+"' class='user_pic'><img src='"+obj_son[k].user_pic+"' width='45' height='45'/></a><p class='user_speak'><a href='"+obj_son[k].user_href+"'>"+obj_son[k].user_name+":</a>"+obj_son[k].user_text+"</p></li>";
					}
					 htmls = htmls + "<div class='wall_panel'><div class='wl_main'><a href='"+obj[i].href+"' class='wlm_pic'><img src='"+obj[i].src+"' width='202' alt='"+obj[i].name+"'/><span>轻轻点我查看"+obj[i].num+"张图片</span></a><a href='"+obj[i].href+"' class='wlm_title'>"+obj[i].name+"</a><ul class='wl_state'>"+html_son+"</ul><div class='wl_num'><a href='#' class='wln_left' title='收藏'>收藏(<font>18</font>)</a><a href='#' class='wln_center' title='评论'>评论(<font>18</font>)</a><a href='"+obj[i].href+"' class='wln_right bshareDiv' title='"+obj[i].name+"'></a><font class='wln_num'>分享(<span  class='BSHARE_COUNT' ></span>)</font></div></div></div>";
					 
			  }	
			  	  
			  return htmls;	
			  }
	  }
	  $('#container').waterfall(opt);

</script>
</body>
</html>
  
.pic_wall {
	width: 100%;
	padding-bottom: 30px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DADADA;
}
.pic_wall .wall_list {
	width: 232px;
	float:left;
	margin-left:14px;
	}
.pic_wall .wall_list.first {
	margin-left:0px;
	}
.pic_wall .wall_list .wall_panel {
	width: 232px;
	margin-bottom:15px;
	background-image: url(images/border_bottom_bk.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #EAEAEA;
	border-right-color: #DBDBDB;
	border-left-color: #DBDBDB;
	background-color:#fff;
	padding-bottom: 3px;
	}
.pic_wall .wall_list .wall_panel .wl_main {
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main:hover {
	padding-top: 13px;
	padding-right: 13px;
	padding-left: 13px;
	padding-bottom: 8px;
	border: 2px solid #fab0d2;
	}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic {
	position: relative;
	width: 100%;
	display: block;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic span {
	width: 100%;
	color: #fff;
	background-color: #000;
	height: 30px;
	line-height:30px;
	display:block;
	text-align:center;
	filter: Alpha(Opacity=60);
	opacity:0.6;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic:hover span {
	color:#FF006F;
	}
.pic_wall .wall_list .wall_panel .wl_main .wlm_title {
	line-height: 20px;
	font-size:14px;
	display:block;
	color: #030303;
	padding-top: 10px;
	padding-bottom: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_title:hover {
	color:#FF006F;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_state {
	width:100%;
	margin-bottom:6px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li{
 	border-top: 1px solid #F1F1F1;
    height: 64px;
    position: relative;
    width: 100%;

}

.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_pic {
	position: absolute;
	height: 45px;
	width: 45px;
	left: 0px;
	top: 8px;
	border:1px solid #fff;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li:hover .user_pic {
	border:1px solid #FF006F;
}

.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_speak {
	line-height: 22px;
	position: absolute;
	height: 46px;
	overflow:hidden;
	width: 140px;
	right: 10px;
	top: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_speak a{
	color:#FF006F;
	margin-right:6px;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num {
	background-image: url(images/list_bk.png);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 45px;
	width: 100%;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a{
	height: 18px;
	width: 33%;
	line-height: 18px;
	color:#FF006F;
	position: absolute;
	top: 10px;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a:hover{
	color:#f90;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a:hover font{
	color:#f90;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_left {
	left: 0px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_center {
	left: 33%;
	text-align:center;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_right {
	right: 0px;
	text-align:right;
	z-index: 2;
	width: 50px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num font.wln_num {
	right: 0px;
	top:10px;
	text-align:right;
	position: absolute;
	color:#FF006F
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num font.wln_num span{
	color:#FF97C4
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a font{
	color:#FF97C4;
	}
	




/**
分页样式
*/
.list_page {
	height: 60px;
	width: 100%;
	margin-top: 20px;
}
.list_page .lp_main {
	width:550px;
	height: 40px;
	margin-right: auto;
	margin-left: auto;
	overflow:hidden;
	text-align:center;
}
.list_page .lp_main .page_element{
	text-align:center;
	display:inline-block;
	line-height:36px;
	font-size:14px;
	color:#9D9D9D;
	font-weight:600;
	}
.list_page .lp_main .page_element:hover{
	color:#FF006F;
	}
.list_page .lp_main .lp_home {
	background-image:url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -110px -160px;
	height: 40px;
	width: 49px;
	margin-right: 10px;
}
.list_page .lp_main .lp_pageUp {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -160px -160px;
	height: 40px;
	width: 87px;
	margin-right: 20px;
}
.list_page .lp_main .lp_pageUp:hover {
	background-position: -160px -120px;
	}
.list_page .lp_main .lp_pageNum {
	background-color: #fff;
	height: 35px;
	width: 33px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #DDDDDD;
	margin-right: 1px;
	color:#000;
}
.list_page .lp_main .lp_pageNum:hover {
	background-color:#FF006F;
	color:#fff;
	}
.list_page .lp_main .lp_pageNum.current {
		background-color:#FF006F;
		color:#fff;
	}	
.list_page .lp_main .lp_pageDown {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -250px -160px;
	height: 40px;
	width: 87px;
	margin-left: 20px;
}
.list_page .lp_main .lp_pageDown:hover {
	background-position: -250px -120px;
	}
.list_page .lp_main .lp_end {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -110px -160px;
	height: 40px;
	width: 49px;
	margin-left: 10px;
}
  
/**
 ************************************************************
 ***@project jquery瀑布流插件
 ***@author hcp0209@gmail.com
 ***@ver version 1.0
 ************************************************************
 */



var WALL_PAGE =0;
var WALL_MAX_PAGE = 5;
var WALL_NODATA = false;
var WALL_NUMBER = 20; //当返回数据不满些数值时将不再向服务器请求数据
(function($){
	
   var 
   //参数
   setting={
      column_width:230,//列宽
	  column_className:'wall_list',//列的类名
	  column_space:'none',//列间距
	  cell_selector:'.wall_area',//要排列的砖块的选择器，context为整个外部容器
	  img_selector:'img',//要加载的图片的选择器
	  auto_imgHeight:true,//是否需要自动计算图片的高度
	  fadein:true,//是否渐显载入
	  fadein_speed:1000,//渐显速率，单位毫秒
	  insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入
	  uri : '',
	  callback : null,
	  getResource:function(index){ 
	  
	    if(WALL_NODATA==true){
			$(".lp_main").removeClass("hidden");
			 return false;
				 }
	 		APP.showLoading({
					conn : '#'+$container.attr('id')
			})
			$.getJSON(setting.uri, {
				  pageCount : index,
				  key : ''
			}, function(result) {
					if(result.length==0){
					
						waterfall.load_index--;
						WALL_PAGE --;
						WALL_NODATA = true;
						waterfall.$container.html(' <div class="noData lc_class panel_bk"><a href="index.html"></a></div>');
						
						APP.hideLoading();
						return false;
						}
					if(result.length<WALL_NUMBER){
						//如果返回数据不足设定的值时，不再对服务器进行请求
						WALL_NODATA = true;
					}	
					render( setting.callback(result),true);
						APP.hideLoading();
					}
			);
			
	  }  //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
	  
	  
   },
   //
   waterfall=$.waterfall={},//对外信息对象
   $container=null;//容器
   waterfall.load_index=0, //加载次数,每滚动一屏后自增
   $.fn.extend({
       waterfall:function(opt){
		  opt=opt||{};  
		  setting=$.extend(setting,opt);
		  $container=waterfall.$container=$(this);
		  waterfall.$columns=creatColumn();
		  render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
		  waterfall._scrollTimer2=null;
		  $(window).bind('scroll',function(){
			 clearTimeout(waterfall._scrollTimer2);
			 waterfall._scrollTimer2=setTimeout(onScroll,300);
		  });
		  waterfall._scrollTimer3=null;
		  $(window).bind('resize',function(){
			 clearTimeout(waterfall._scrollTimer3);
			 waterfall._scrollTimer3=setTimeout(onResize,300);
			
		  });
		 
		 
//进入页面即加载第一屏
onScroll();

	   }
	   
   });
   function creatColumn(){//创建列
      waterfall.column_num=calculateColumns();//列数
	  //循环创建列
	  var html='';
	  for(var i=0;i<waterfall.column_num;i++){
		  
	//	 html +='';
	//  此处代码错误，baukh因为此代码会造成原html中的数据总是在最下方，所以将其隐藏，如以后出现问题，可将此代码放开，进行调试。  html+='<div class="'+setting.column_className+'"></div>'; 
	  }
	  $container.prepend(html);//插入列
	
	  return $('.'+setting.column_className,$container);//列集合
   }
   function calculateColumns(){//计算需要的列数
      var num=Math.floor(($container.innerWidth())/(setting.column_width+setting.column_space));
	  if(num<1){ num=1; } //保证至少有一列
	  return num;
   }
   function render(elements,fadein){//渲染元素
      if(!$(elements).length) return;//没有元素
	  
      var $columns = waterfall.$columns;
      $(elements).each(function(i){		
	  	  								
		  if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了
		     if(setting.insert_type==1){ 
			    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
			 }else if(setting.insert_type==2){
			    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
		     }
			 
			 return true;//continue
		  }						
		  if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片
		      var image=new Image;
			  var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
			  image.οnlοad=function(){//图片加载后才能自动计算出尺寸
			      image.onreadystatechange=null;
				  if(setting.insert_type==1){ 
				     insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
				  }else if(setting.insert_type==2){
					 insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
				  }
				  image=null;
			  }
			  image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件
			      if(image.readyState == "complete"){
					 image.οnlοad=null;
					 if(setting.insert_type==1){ 
					    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
					 }else if(setting.insert_type==2){
					    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
					 }
					 image=null;
				  }
			  }
			  image.src=src;
		  }else{//不用考虑图片加载
		      if(setting.insert_type==1){ 
				 insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
			  }else if(setting.insert_type==2){
				 insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
			  }
			  
		  }	
		  	
	  });
	  
	  
   }
   function public_render(elems){//ajax得到元素的渲染接口
   	  render(elems,true);	
	  
   }
   function insert($element,fadein){//把元素插入最短列
      if(fadein){//渐显
	     $element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
	  }else{//不渐显
         $element.appendTo(waterfall.$columns.eq(calculateLowest()));
	  }
	     initShare();
		 
		//  	baukhShare(".bshareDiv"); //分享所需JS
		
		
   }
   function insert2($element,i,fadein){//按序轮流插入元素
      if(fadein){//渐显
	     $element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
	  }else{//不渐显
         $element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
	  }
	  initShare();
	  
	  
   }
   function calculateLowest(){//计算最短的那列的索引
      var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
	  waterfall.$columns.each(function(i){						   
		 if($(this).outerHeight()<min){
		    min=$(this).outerHeight();
			min_key=i;
		 }							   
	  });
	  return min_key;
   }
   function getElements(){//获取资源
      $.waterfall.load_index++;
      return setting.getResource($.waterfall.load_index);
   }
   waterfall._scrollTimer='';//延迟滚动加载计时器
   function onScroll(){//滚动加载
      clearTimeout(waterfall._scrollTimer);
	   
	  waterfall._scrollTimer=setTimeout(function(){
	      var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列
		  var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离
				
			
		  
		  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
		  var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度
		  if(scrollTop>=bottom-windowHeight){
			
			
			  
			  
			  if(WALL_PAGE<WALL_MAX_PAGE){
					getElements();
					WALL_PAGE++;
				  }else{
					  $(".lp_main").removeClass("hidden");
					  }
		  }
	  },100);
	  
   }
   function onResize(){//窗口缩放时重新排列
  /* 去除窗口缩放效果，原因是当缩放时会出错
      if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排
      var $cells=waterfall.$container.find(setting.cell_selector);
	  waterfall.$columns.remove();
	  waterfall.$columns=creatColumn();
      render($cells,false); //重排已有元素时强制不渐显
	  
	 */
   }
})(jQuery);

$(function(){
	
initShare()
	
})
 
  
function initShare() {
	var headers = $(".bshareDiv");

	if (typeof (bShare) == 'undefined')
		return false;
	bShare.entries = [];
	$.each(headers, function(i, h) { // 遍历所有文章标题元素
		var a = bShare.addEntry({
			title : $(h).attr('title'), // 获取文章标题
			url : $(h).attr('href'), // 获取文章链接
			summary : $(h).attr('title')
		// 从postBody中获取文章摘要
		})

	});
	bShare.completed = false;
	bShare.start();
}
var APP = {
	SERVERROOT : '/danggui/',
	ajax : function(arg) {
		$("body").append('<div class="postLoading">努力提交中......</div>');
		var w = $(window).width();
		$(".postLoading").css("left", w / 2 - 95);
		$(".postLoading").show();
		$.post(arg.url, arg.data, function(data) {
			if (data.success) {
				if (jQuery.isFunction(arg.callback)) {
					arg.callback(data);
				}
				$(".postLoading").remove();
			} else {
				if (data.state && data.state == 'nologin') {
					alert(data.msg);
					top.location.href = AppUrl
							+ 'userCenter/login.jsp?backUrl='
							+ arg.data.objecturl;
				} else {
					if (data.msg) {
						alert(data.msg);
					} else {
						alert("网络错误，请重试");
					}
				}
				$(".postLoading").remove();
			}
		}, "json");
	},
	/**
	 * @conn : 要把页面加载到哪一个容器，比如传入#mainContent,就是加载到ID为mainContent的容器中
	 * @uri : 访问的地址，从网站根目录开始
	 * 
	 * ///可选项
	 * @data : 加载页时候的参数，也可以跟在uri后边这里传入的data是json对象
	 * @callback : 页面加载成功后的回调函数
	 * @showLoding : json对象，
	 *  ｛ noBorder : true, //默认为false，带边框的loading图标 bigSize : true
	 * //默认为false,加高的loading ｝
	 * 
	 * ,默认为null,是否给容器中显示loading方法
	 * @加载成功后，会自动加载跟页面名称一样的一个JS，用来启动这个页面上的其他UI,加载的这个JS中直接运行的方法也是回调函数
	 */
	loadPage : function(arg) {

		if (arg.uri.indexOf('?') == -1) {
			arg.uri = arg.uri + '?t=' + new Date().getTime();
		} else {
			arg.uri = arg.uri + '&t=' + new Date().getTime();
		}

		$(arg.conn).html('');
		if (arg.conn.indexOf("#") == -1)
			arg.conn = "#" + arg.conn;

		if (arg.showLoading) {// 显示loading
			APP.showLoading({
				conn : arg.conn,
				noBorder : arg.showLoading.noBorder || false,
				bigSize : arg.showLoading.bigSize || false
			})
		}
		$(arg.conn).load(APP.SERVERROOT + arg.uri, arg.data, function() {

			if (jQuery.isFunction(arg.callback)) {
				arg.callback();
			}
			APP.hideLoading();
			var pageName = arg.uri.substring(0, arg.uri.lastIndexOf("."));
			var jsFile = APP.SERVERROOT + pageName + '.js';
			$.getScript(jsFile);
		});
	},
	/***************************************************************************
	 * @页面上所有带有class = ajaxBar 的标签，都会被识别
	 * @标签上必须要有的属性
	 * @href : 从这个地址加载，地址是绝对路径，如，/userCenter/login.html
	 * @conn : 容器的ID，不带#号。要把这个超级链接加载到哪一个容器中去,这里为了避免出现问题，暂时只提供ID的方式
	 * @showLoading : 是否显示loading图标
	 */
	initAjaxBar : function() {
		$(".ajaxBar").unbind('click');
		$(".ajaxBar").click(function() {
			var uri = $(this).attr('href');
			var conn = $(this).attr('conn');
			var hasShowLoading = $(this).attr('showLoading');
			var showLoadingConfig = {};
			var title = $(this).text();

			if (hasShowLoading) {

				showLoadingConfig = {
					noBorder : $(this).attr('noBorder'),
					bigSize : $(this).attr('bigSize')
				}
			}

			APP.loadPage({
				conn : '#' + conn,
				uri : uri,
				data : '',
				showLoading : showLoadingConfig,
				callback : function() {
					APP.initAjaxBar();

				}
			})
			return false;
		})
	},
	ucAjaxBar : function() {

		$(".ucajaxBar").unbind('click');
		var connID = 'ucConn';
		/*
		 * var connTitle = 'ucTitle'; var connTitle = 'ucContent';
		 */

		$(".ucajaxBar").attr('conn', connID);
		$(".ucajaxBar").attr('showLoading', 'true');
		$(".ucajaxBar").attr('bigSize', 'true');
		$(".ucajaxBar")
				.click(
						function() {
							var barTitle = $(this).attr("barTitle");

							var h = '<div class="user_Panle user_con"> <h2 class="up_title color_pink"><span id="ucTitle"></span></h2> <div class="up_body" id="ucContent"></div> <div class="bottom_border"></div></div>';

							$("#user_content").html(h);
							$("#user_content").attr('id', connID);

							var uri = $(this).attr('href');
							var conn = $(this).attr('conn');
							var hasShowLoading = $(this).attr('showLoading');
							var showLoadingConfig = {};
							var title = $(this).attr('title');
							$('#ucTitle').text(title);
							if (hasShowLoading) {

								showLoadingConfig = {
									noBorder : $(this).attr('noBorder'),
									bigSize : $(this).attr('bigSize')
								}
							}
							var connId = '#ucContent';

							APP.loadPage({
								conn : connId,
								uri : uri,
								data : '',
								showLoading : showLoadingConfig,
								callback : function() {
									APP.ucAjaxBar();
								}
							})
							return false;
						})
	},
	getWindow : function() {

	},
	initSearchToggle : function() {
		$("#moreClassicBar").click(function() {
			var status = $("#moreClassic").css('display');

			if (status == 'none') {// 隐藏的，需要显示出来
				$("#moreClassicBar").removeClass('hide');
				$("#moreClassic").show();

			} else {

				$("#moreClassicBar").addClass('hide');
				$("#moreClassic").hide();
			}
		})

	},
	initSiderBar : function() {
		var w = $(window).width();
		$("#site-side-bar").css('right', (w - 1000) / 2 - 50);
		$("#site-side-bar").show();
		$(window).bind(
				'scroll',
				function() {
					var w = $(window).width();
					var scrollTop = document.documentElement.scrollTop
							|| document.body.scrollTop || 0;// 滚动条距离
					if (scrollTop > 178) {
						$("#site-side-bar").css('top', 50)
					} else {
						$("#site-side-bar").css('top', 195)
					}
					$("#site-side-bar").css('right', (w - 1000) / 2 - 50);
				});

	},
	initHeaderTools : function() {
		$(window).bind(
				'scroll',
				function() {
					var scrollTop = document.documentElement.scrollTop
							|| document.body.scrollTop || 0;// 滚动条距离
					if (scrollTop > 178) {
						$("#susHeader").css('position', 'fixed');
						$("#susHeader").css('top', '0');
						$("#susHeader").css('width', '100%');
						$("#susHeader").css('z-index', '999');
					} else {
						$("#susHeader").css('position', '');
						$("#susHeader").css('top', '');
						$("#susHeader").css('width', '');
						$("#susHeader").css('z-index', '');
					}

				})
	},
	initSearchInput : function() {
		var t = '亲，请随便搜搜吧'
		$('.search_text').focus(function() {
			if ($(this).val() == t) {
				$(this).val('')
			}
		}).blur(function() {
			if ($(this).val() == '') {
				$(this).val(t)
			}
		})
	},
	/**
	 * @noBorder : true 默认为 false
	 * @bigSize : true 默认为 false
	 * @conn : 要给哪一个容器添加
	 */
	showLoading : function(arg) {

		var noBorderClass = arg.noBorder ? 'noBorder' : '';
		var bigSize = arg.bigSize ? 'bigSize' : '';
		var html = '<div class="loading ' + noBorderClass + ' ' + bigSize
				+ '"><div class="loadingInner">正在努力加载中......</div></div>';

		$('.loading').remove();
		$(arg.conn).append(html);
		$('.loading').fadeTo('500', 1);
	},
	hideLoading : function() {
		$('.loading').fadeTo('500', 0, function() {
			$(this).remove();
		});
	},
	returnTop : function() {
		$("#site-side-bar").find('.returnTop').attr('href', 'javascript:;');
		$("#site-side-bar").find('.returnTop').attr('title', '返回顶部');

		$("#site-side-bar").find('.returnTop').click(function() {
			if (document.documentElement.scrollTop) {
				document.documentElement.scrollTop = 0;
			} else {
				document.body.scrollTop = 0;
			}
		})
	},
	resetImg : function() {
		$(".dm_content").find("img").each(function() {
			var w = $(this).width();
			if (w > 698) {
				$(this).width(698);
			}

		})

	}
}
var ChooseUserIco = {
	init : function() {
		$(".chooseUserIcoBar").click(function() {
			var h = ChooseUserIco.getHtml();
			$('#chooseIco').html(h);
			$('#chooseIco').show();
			$('#chooseIco').mouseout(function() {
				$('#chooseIco').hide();

			}).mouseover(function() {
				$('#chooseIco').show();
			})
			return false;
		})

	},
	getHtml : function() {
		var h = '';
		for ( var i = 1; i <= 50; i++) {
			h += '<a class="userIco" id="userIco'
					+ i
					+ '" href="javascript:void(0)" οnclick="ChooseUserIco.setValue(\'userIco'
					+ i + '\')"><img src="' + APP.SERVERROOT
					+ 'resources/uicon/' + i
					+ '.jpg" width="48" height="48" /></a>';
		}
		return h;
	},
	setValue : function(id) {
		var obj = $("#" + id);
		var icoUri = $(obj).find('img').attr('src');
		$("#userIcoVal").val(icoUri);
		$("#up_img").find('img').attr('src', icoUri);
	}
}
var ECForm = {

	index : 1,
	init : function() {

		if ($("form[inited!=true]").size() == 0) {
			return false;
		}
		$("form[inited!=true]").each(function() {
			var form = $(this);
			var id = "ecform" + ECForm.index++;
			form.attr("inited", true);

			if (!form.attr("id")) {
				form.attr("id", id);
			} else {
				id = form.attr("id");
			}

			// ECForm.dateui(form);
			ECForm.editor(form);
			ECForm.checkImg();
			ECForm.fileui(form);
			ECForm.treeui(form);
			ECForm.validator(id);
		});
	},
	dateui : function(form) {

		var dui = form.find(".ec-dateui");
		dui.attr("readonly", "readonly");
		dui.datepicker({
			dateFormat : "yy-mm-dd"
		});

	},
	validator : function(id) {

		$("#" + id).Validform(
				{
					btnSubmit : ".uf_submit",
					tiptype : function(msg, o, cssctl) {

						// msg：提示信息;
						// o:{obj:*,type:*,curform:*},
						// obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4，
						// 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态,
						// curform为当前form对象;
						// cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和
						// 当前提示的状态（既形参o中的type）;
						if (!o.obj.is("form")) {// 验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
							var objtip = o.obj.siblings(".Validform_checktip");
							if (objtip.size() == 0) {
								objtip = o.obj.parent().parent().find(
										".Validform_checktip");

							}
							cssctl(objtip, o.type);
							objtip.text(msg);
						}
					}
				});
	},
	editor : function(form) {
		form.find(".eceditor[inited!=true]").each(function() {
			var editorid = "editor" + ECForm.index++;
			$(this).attr("id", editorid);
			$(this).attr("inited", "true");
			var w = $(this).width();
			var editor_a = new baidu.editor.ui.Editor({
				initialFrameWidth : w,
				minFrameHeight : 150
			}).render(editorid);
		});
	},
	checkImg : function() {
		$(".checkImgBar").click(function() {
			var s = $("#checkImg").attr('src')
			s = s + '&t=' + new Date().getTime();

			$("#checkImg").attr('src', s)
		})
	},
	fileui : function(form) {
		form.find(".upload-image-button").each(
				function() {
					var mxid = ECForm.index++;
					$(this).attr("fid", "f" + mxid);
					$(this).parent().find(".uf_text").attr("fid", "f" + mxid);
					$(this).parent().find(".uf_text").attr("id", "t" + mxid);
					var filename = $(this).attr("filename");
					$(this).parent().append(
							'<input name="' + filename + '" type="file" id="f'
									+ mxid + '" style="display:none"/>');
					$("#f" + mxid).change(
							function() {
								$("#t" + $(this).attr("id").replace("f", ""))
										.val($(this).attr("value"));
							});
					$(this).parent().find(".uf_text").click(function() {
						$("#" + $(this).attr("fid")).get(0).click();
					});
				});
		form.find(".upload-image-button").click(function() {
			$("#" + $(this).attr("fid")).get(0).click();
			return false;
		});
	},
	treeui : function(form) {
		var treeui = form.find('.treePanel');
		treeui.each(function() {

			var ztreeui = $(this).find('.ztree');
			var ztreeinput = $(this).find('input[type=text]');
			var ztreeinputName = ztreeinput.attr('name');
			var checkValue = ztreeinput.attr('checkValue');
			ztreeinput.attr('name', ztreeinputName + '_text');
			$(this).append(
					'<input name="' + ztreeinputName
							+ '" type="hidden" value="' + checkValue + '" />');
			var formID = form.attr("id");
			ztreeui.attr("form", formID);
			ztreeui.attr("valuiName", ztreeinputName);
			ECTree.init({
				uri : ztreeui.attr('uri'),
				treeConn : ztreeui.attr('id'),
				check : ztreeui.attr('check') || '',
				chkStyle : ztreeui.attr('chkStyle') || '',
				radioType : ztreeui.attr('radioType') || '',
				chkboxTypeY : ztreeui.attr('chkboxTypeY') || '',
				chkboxTypeN : ztreeui.attr('chkboxTypeN') || ''
			});

			$("#" + ztreeui.attr('id')).mouseout(function() {
				$(this).hide();
			}).mouseover(function() {
				$(this).show();

			})
			ztreeinput.click(function() {

				$("#" + ztreeui.attr('id')).show();
			})

		});
	}

}
var Fav = {
	post : function(data) {
		APP.ajax({
			url : AppUrl + "plugin/collection!save.action",
			data : data,
			callback : function(json) {
				alert(json);
				var obj = eval(json);
				if (obj.success) {
					alert(obj.msg);
				} else {
					if (obj.state == 'nologin') {
						alert(obj.msg);
						top.location.href = AppUrl
								+ 'userCenter/login.jsp?backUrl='
								+ arg.objecturl;
					} else {
						alert(obj.msg);
					}
				}
			}
		})
	}
}
$(function() {
	APP.initSearchToggle();
	APP.initSiderBar();
	APP.initHeaderTools();
	APP.initSearchInput();
	APP.initAjaxBar();
	APP.resetImg();
	APP.returnTop();
	initShare();
	ChooseUserIco.init();
	ECForm.init();
})
 
写个程序换个饼
关注
专栏目录
jQuery瀑布流布局带分页效果
11-28
jQuery瀑布流布局带分页效果，实现瀑布流布局主要分为两个部分，实现流体布局，这里我们采用绝对定位的方式实现，而是滚动触发的 Ajax 分页，这里采用 jQuery 的 Ajax 实现。
ajax瀑布流分页
pt1742395895的博客
10-10 1349
ajax瀑布流分页
feed 流（瀑布流）中的分页问题
终日而思不如须臾所学。
08-26 674
以前在开发失物招领微信小程序时就遇到了这种问题， 某条失物信息出现了两次， 因为出现的频率很低很低， 还以为是腾讯云出了问题， 事故现场 pageSize pageNum 如果有人增加或者删除内容； 就会出现某一条内容错位； 解决方案 采用 last_id 来记录上一页最后一条内容的 id； 前端读取下一页的时候，将last_id作为入参； 后端直接找到last_id对应数据，再往后偏移page_size条数据，返回给前端； last_id 本身这条数据不可以被硬删除； ...
基于分页基础上的瀑布流
weixin_34268843的博客
08-14 235
1、页面（jsp） 1 <script type="text/javascript"> 2 var beginShow=1,//初始化显示的条数，以后作为当前第一页 3 perNum = 10,//每次滚动时加载的数量 4 pCount = 1;//定义一个总页数，在ajax返回的时候会修改它 5 //设置是否继续滚动加载的标志位...
瀑布流布局html+css+js分享
且听风吟
11-22 1124
很久没上这个博客了，刚入行三四个月，很多东西都不懂，在公司也没多少项目可做，更多的是在做简单的维护工作，有时候，我都在怀疑自己以后是不是真的会继续在这行做下去？有的时候甚至想放弃，感觉自己有太多的东西不懂，在学的过程中断断续续，毅力不够！不知道是兴趣所驱使还是什么，我还是决定一步步慢慢来，相信自己以后会找到更好的平台去做好这个工作！ 废话不多说了，今天就来和大家分享一个最近刚学的瀑布流布局。以下
微信小程序--瀑布流展示效果（通用潮流网络直播、图片展示）
07-28
瀑布流布局，也称为Pinterest布局，是一种常见的网页设计模式，尤其适用于内容丰富的应用，如图片分享、网络直播或文章展示，因为它能够以美观且易于浏览的方式排列内容。 1. **瀑布流组件**： 这个项目中提到的...
ashx测试图片瀑布流源码 Ashxtestpicturewaterfallstream.rar
01-23
ashx测试图片瀑布流源码 源码描述： 一、源码特点 1、ashx测试图片瀑布流 二、菜单功能 1、瀑布流、ashx分页、图片瀑布流 三、注意事项 1、开发环境为Visual Studio 2015，无数据库，使用.net 4.0开发。
jquery实现瀑布流效果分享
10-26
瀑布流布局，又称Masonry布局，是一种常见的网页元素排列方式，尤其在展示图片或商品时非常流行。这种布局方式的特点是让元素根据浏览器窗口大小自动调整排列，形成类似瀑布的效果，即每一列的高度各不相同，但整体...
瀑布流代码，简洁版 带分页
dc1215225的博客
06-11 270
接上一篇瀑布流代码，简洁版的功能之上添加分页的功能 完整的版本：瀑布流代码 带分页 Index.cshtml @using PagedList.Mvc @model PagedList.StaticPagedList<int> @{ ViewBag.Title = "瀑布流"; Layout = "~/Vie...
瀑布流+lightbox+infinite_scroll无限加载分页+php+mysql
12-24
图片瀑布流展示，整合lightbox点击看大图，和infinite_scroll无限下拉即加载下一页，资源完全从mysql库中调用，只需导入数据库即可
使用动态加载懒加载瀑布流布局以及LightBox实现一个图片搜索效果
08-10
使用动态加载(懒加载)、瀑布流布局以及LightBox实现一个图片搜索效果
分页数据的新展示方式---瀑布流
weixin_30271335的博客
06-12 345
最近老大让我做一个js效果，要求页面开始展示（比方说40条数据），当鼠标滚动到页面底部时，再加载后面的数据。开始没有半点头绪，想到过jQuery插件，但是也没怎么用起来，还是自己写吧；可以肯定的一条思路是：当滚动页面底部时，肯定是去加载下一页的数据了，这个时候页面应该没有刷新的操作，所以想到了异步Ajax。 代码部分，首先在SQL server中写了一个存储过程， A...
vue3实现一个滚动分页加载瀑布流列表
weixin_45644355的博客
10-27 4004
项目框架：vue3+JS+vite 瀑布流框架：vue-waterfall-next问了chatGPT，对于vue3有哪些好用的瀑布流插件，回答如下： 对于 Vue 3，有一些瀑布流插件可供选择。以下是几个常用的 Vue 3 瀑布流插件： vue-waterfall-next：这是一个基于 Vue 3 的瀑布流插件，它提供了简单易用的 API，可以帮助你实现瀑布流布局。它支持动态加载数据和无限滚动，并且具有自定义配置选项，如列数、间距等。 vue-masonry-wall：这是一个基于 Vue 3 的瀑布流
瀑布流H5页面不再难！纯JS实现+分页加载，让你轻松上手！
最新发布
hulianwangjike的博客
08-06 241
持续每天分享好用的软件源码
JS小案例_瀑布流无限加载数据分页
sunnyday的博客
06-28 618
案例的分析 如何确定当前显示的数据已经浏览完毕？ 公式：(滚动条距底部的距离 + 滚动条上下滚动的距离 + 当前窗口的高度) >= 当前文档的高度 所需知识点 前端： scroll() 鼠标滚动事件 $(window).height() 当前窗口的高度 $(window).scrollTop() 滚动条上下滚动的距离 $(document).height() 当前文档的高度 后台： mybatis分页插件 查询结果封装为JSON格式 实现代码（前端） <!DOCTY
Json数据类型/分页算法/数据瀑布流加载
Dimuzero的博客
12-31 310
1.Json数据类型 简单Json的使用 后台给前端返回的数据格式 JSON 解析json 进行数据绑定 JSON 数据类型是 ： 数组 + 对象 创建（name上的引号可以不加） var arr=[ {"name":"b1"}, {"name":"b2"}, {"name":"b3"}, {"name":"b4"} ]; 调用 console.log(arr[1].name); 2.分页算法 <!DOCTYPE
瀑布流判断加载分页条件
weixin_30443895的博客
01-12 212
很流行的瀑布流式布局，如何判断内容是否需要加载接口，什么时候开始加载合适，加载到什么地方停止？来看看这个简单的思路。 一般我们是这样子的。 1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。 2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。 3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击...
多种风格瀑布流实现与源码分享
3. 无限加载瀑布流：通过动态加载数据，实现当用户滚动到页面底部时自动加载更多内容，这样的瀑布流布局适合于图片分享网站、商品展示网站等需要展示大量信息的场景。 4. 高级瀑布流：除了基本的布局之外，还可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值