前端JS特效第54集：带收藏转载的jquery瀑布流

最新推荐文章于 2024-07-29 15:46:22 发布
最新推荐文章于 2024-07-29 15:46:22 发布
阅读量323 收藏
点赞数 6
文章标签： 前端 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/140000025
版权

带收藏转载的jquery瀑布流，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!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">
<title>带收藏转载的jquery瀑布流 - php中文网</title>
<link rel="stylesheet" href="css/center.css" type="text/css" media="all">
<link rel="stylesheet" href="css/pbl.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
var isWidescreen=screen.width>=1280; 
if(isWidescreen){document.write("<style type='text/css'>.demo{width:981px;}</style>");}
</script>
<style type="text/css">
.demo{width:981px;}
</style>
<script type="text/javascript">
function item_masonry(){ 
	$('.item img').load(function(){ 
		$('.infinite_scroll').masonry({ 
			itemSelector: '.masonry_brick',
			columnWidth:231,
			gutterWidth:19								
		});		
	});
		 //columnWidth 函数递增控制div左边距
	$('.infinite_scroll').masonry({ 
		itemSelector: '.masonry_brick',
		columnWidth:231,
		gutterWidth:19								
	});	
}
$(function(){
//滚动条下拉事件
	function item_callback(){
		$('.item').mouseover(function(){
			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
			//alert(1);
			$('.btns',this).show();
		}).mouseout(function(){
			$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
			$('.btns',this).hide();		 	
		});
		item_masonry();	
	}
	item_callback();  
	$('.item').fadeIn();
	var sp = 1
	$(".infinite_scroll").infinitescroll({
		navSelector  	: "#more",
		nextSelector 	: "#more a",
		itemSelector 	: ".item",
		loading:{
			img: "images/masonry_loading_1.gif",
			msgText: '正在加载中....',
			finishedMsg: '木有了,看看下一页',
			finished: function(){
				sp++;
				if(sp>=10){ //到第10页结束事件
					$("#more").remove();
					$("#infscr-loading").hide();
					$("#pagebox").show();
					$(window).unbind('.infscr');
				}
			}	
		},errorCallback:function(){ 
			$("#pagebox").show();
		}
	},function(newElements){
		var $newElems = $(newElements);
		$('.infinite_scroll').masonry('appended', $newElems, false);
		$newElems.fadeIn();
		item_callback();
		return;
	});
});
</script>
</head>
<body>
<!--瀑布流 start-->
<div class="pbl_container">
  <div class="pblCon">
    <div class="demo clearfix">
      <div class="item_list infinite_scroll">
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">20个圆角风格minimal图标</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">154个网站开发常用图标下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">3D立体网页图标下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">psd手机图标矢量图下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">超炫手机图标素材下载含psd文件</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">圆形扁平化图标PSD素材</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">psd时钟和邮箱网页图标素材下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="16个立体生活网页图标素材下载" src="images/8.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">16个立体生活网页图标素材下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="谷歌风格扁平化图标PSD素材" src="images/9.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">谷歌风格扁平化图标PSD素材</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="谷歌矢量网页图标素材下载含psd" src="images/10.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">谷歌矢量网页图标素材下载含psd</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="谷歌系列扁平化图标PSD素材" src="images/2.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">谷歌系列扁平化图标PSD素材</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="高清手机界面psd图标下载" src="images/8.jpg" /></a>
              <div class="btns">
               
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
				
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">高清手机界面psd图标下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
      </div>
    </div>
  </div>
</div>
<!--回到顶部-->
<button id="ScrollToTop" class="btnimg Button2 WhiteButton" type="button">返回<br>顶部</button>
<div id="content" style="display:none">
<div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="20个圆角风格minimal图标" src="images/1.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">20个圆角风格minimal图标</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="154个网站开发常用图标下载" src="images/2.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">154个网站开发常用图标下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="3D立体网页图标下载" src="images/3.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">3D立体网页图标下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="psd手机图标矢量图下载" src="images/4.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">psd手机图标矢量图下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="超炫手机图标素材下载含psd文件" src="images/5.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">超炫手机图标素材下载含psd文件</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="圆形扁平化图标PSD素材" src="images/6.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">圆形扁平化图标PSD素材</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="psd时钟和邮箱网页图标素材下载" src="images/7.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">psd时钟和邮箱网页图标素材下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
        <div class="item masonry_brick">
          <div class="item_t">
            <div class="img"> <a href="http://php.cn" target="_blank"><img width="210" alt="16个立体生活网页图标素材下载" src="images/8.jpg" /></a>
              <div class="btns">
                
					<a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton  repin_link  notlogin"><em></em>转采<span class="num">(102)</span></a>
					
                <div class="f-r"> <a href="http://php.cn" data-id="1092" class="Button2 Button11 WhiteButton ContrastButton likebuttonnotlogin"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
                <!-- 收藏 攒一个  结束-->
              </div>
            </div>
            <div class="title"><em>T:</em><span><a href="http://php.cn" target="_blank">16个立体生活网页图标素材下载</a></span></div>
          </div>
          <div class="item_b clearfix">
            <div class="items_likes fl"> <span>标签: <a href="http://php.cn">psd分层素材</a> <a href="http://php.cn">网页图标</a> </span> </div>
          </div>
        </div>
        <!--item end-->
</div>
<script type="text/javascript">
//回话顶部JS，最下面还有一段代码
var ScrollToTop=ScrollToTop||{
	setup:function(){
		
		var a=$(window).height()/2;
		$(window).scroll(function(){
			(window.innerWidth?window.pageYOffset:document.documentElement.scrollTop)>=a?$("#ScrollToTop").removeClass("Offscreen"):$("#ScrollToTop").addClass("Offscreen")
		});
		$("#ScrollToTop").click(function(){
			$("html, body").animate({scrollTop:"0px"},400);
			return false
		})
	}
};
$(document).ready(function(){
	ScrollToTop.setup();
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>

全部代码：带收藏转载的jquery瀑布流

强迫领导写Bug
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
带收藏转载的jquery瀑布流.rar
06-23
带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流.rar 带收藏转载的jquery瀑布流....
带收藏转载的jquery瀑布流.zip
07-11
带收藏转载的jquery瀑布流是一款非常实用的瀑布流特效，带有收藏，转载和返回顶部的jquery瀑布流功能，主要是结合翻页插件jquery.infinitescroll使用。
带收藏转载的jquery瀑布流
04-02
带收藏转载的jquery瀑布流是一款非常实用的瀑布流特效，带有收藏，转载和返回顶部的jquery瀑布流功能，主要是结合翻页插件jquery infinitescroll使用。
带收藏转载的jquery瀑布流特效代码
03-20
在本案例中，我们关注的是一个基于jQuery实现的瀑布流特效代码，该代码具有收藏和转载功能，同时集成了翻页插件jquery.infinitescroll来实现内容的无限滚动。 首先，jQuery是JavaScript的一个库，它简化了DOM操作、...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 829
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 609
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1038
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 289
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 244
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
electron 主进程和渲染进程
qq_21087199的博客
07-29 228
虽然最近一年前端大环境不好，但是大家还是要加油鸭！，努力总不会错，千军万马过独木桥，希望大家都是闯过去那一个。进入正题。
基于上云api前端开发经验教训(loading...)
IIIIIAN
07-26 418
对于上云api开发学习过程中的错误教训积累总结
前端学习1——自学习梳理
qq_63125992的博客
07-24 398
【代码】前端学习1——自学习梳理。
前端 axios 封装
最新发布
清云
07-29 406
前端 axios 封装
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 855
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
Vue3扁平化Tree组件的前端分页实现
felix_alone2012的博客
07-24 393
大家好，我是小卷。得益于JuanTree的扁平化设计，在数据量很大的情况下除了懒加载，使用前端分页也是一种解决渲染性能问题的可选方案。
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系解析及应用
uu0216的博客
07-29 699
一个盒子 它的 ::before伪类在最底层, ::after 伪元素在最上层, 其所有子元素在中间叠放。 盒子的 子元素堆叠关系，按照书写顺序自下而上排序：先写的叠放在下面，后写的在上面。 父元素在最下面。
前端开发技术之HTML/CSS
m0_67484548的博客
07-29 526
5. <figure> 和 <figcaption>：<figure> 用于媒体内容的分组，<figcaption> 用于定义 <figure>1. <menu> 和 <menuitem>：定义菜单列表（<menu>）和菜单项（<menuitem>）（HTML5。1. <h1> to <h6>：定义HTML标题，<h1> 表示最高的标题级别，<h6> 表示最低的标题级别。3. <figure> 和 <figcaption>：定义媒体内容的分组，以及媒体的标题或说明。
技术实践—微前端技术应用
iOceanMind的博客
07-26 543
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 534
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值