兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册
PS教程

无限加载自适应屏幕瀑布流图片效果

[复制链接]
tuyuanma 发表于 2017-1-20 18:46:20 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


<!doctype html>
<html>
<head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
         <title>无限加载自适应屏幕瀑布流图片效果</title>
<meta name="keywords" content="无限加载,自适应,瀑布流,图片效果" />
<meta name="description" content="无限加载自适应屏幕瀑布流图片效果。" />
         <link rel="stylesheet" type="text/css" href="style/base.css">
         <link rel="stylesheet" type="text/css" href="style/index.css">
         <!--[if lt IE 9]>
                   <script src="js/css3-mediaqueries.js"></script>
         <![endif]-->
         <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
         <script type="text/javascript" src="js/jQueryColor.js"></script>
         <!--这个插件是瀑布流主插件函数必须-->
         <script type="text/javascript" src="js/jquery.masonry.min.js"></script>
         <!--这个插件只是为了扩展jquery的animate函数动态效果可有可无-->
         <script type="text/javascript" src="js/jQeasing.js"></script>
         <script type="text/javascript">
         /*
                   抛开瀑布流布局各种乱七八糟的算法,基于masonry的瀑布流,很是简单的,而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
                   masonry还有很多参数我这里注解了常用的参数
          */
                   $(function(){
                                     /*瀑布流开始*/
                                     var container = $('.waterfull ul');
                                     var loading=$('#imloading');
                                     // 初始化loading状态
                                     loading.data("on",true);
                                     /*判断瀑布流最大布局宽度,最大为1280*/
                                     function tores(){
                                               var tmpWid=$(window).width();
                                               if(tmpWid>1280){
                                                        tmpWid=1280;
                                               }else{
                                                        var column=Math.floor(tmpWid/320);
                                                        tmpWid=column*320;
                                               }
                                               $('.waterfull').width(tmpWid);
                                     }
                                     tores();
                                     $(window).resize(function(){
                                               tores();
                                     });
                                     container.imagesLoaded(function(){
                                       container.masonry({
                                            columnWidth: 320,
                                         itemSelector : '.item',
                                         isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                                         isAnimated: true,//是否采用jquery动画进行重拍版
                                         isRTL:false,//设置布局的排列方式,即:定位砖块时,是从左向右排列还是从右向左排列。默认值为false,即从左向右
                                         isResizable: true,//是否自动布局默认true
                                         animationOptions: {
                                                        duration: 800,
                                                        easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果,如果没引用删除这行,默认是匀速变化
                                                        queue: false//是否队列,从一点填充瀑布流
                                               }
                                       });
                                     });
                                     /*模拟从后台获取到的数据*/
                                     var sqlJson=[{'title':'瀑布流其实就是几个函数的事!','intro':'爆料,苏亚雷斯又咬人啦,C罗哪有内马尔帅,梅西今年要不夺冠,你就去泰国吧,老子买了阿根廷赢得彩票,输了就去不成了。','src':'images/one.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事!','intro':'爆料了,苏亚雷斯又咬人啦,C罗哪有内马尔帅,梅西今年要不夺冠,你就去泰国吧,老子买了阿根廷赢得彩票,输了就去不成了。','src':'images/demo2.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事!','intro':'爆料了,苏亚雷斯又咬人啦,C罗哪有内马尔帅,梅西今年要不夺冠,你就去泰国吧,老子买了阿根廷赢得彩票,输了就去不成了。','src':'images/p1.jpg','writer':'标题','date':'2小时前','looked':321},{'title':'瀑布流其实就是几个函数的事!','intro':'爆料了,苏亚雷斯又咬人啦,C罗哪有内马尔帅,梅西今年要不夺冠,你就去泰国吧,老子买了阿根廷赢得彩票,输了就去不成了。','src':'images/p1.jpg','writer':'标题','date':'2小时前','looked':321}];
                                     /*本应该通过ajax从后台请求过来类似sqljson的数据然后,便利,进行填充,这里我们用sqlJson来模拟一下数据*/
                                     $(window).scroll(function(){
                                               if(!loading.data("on")) return;
                                               // 计算所有瀑布流块中距离顶部最大,进而在滚动条滚动时,来进行ajax请求,方法很多这里只列举最简单一种,最易理解一种
                                               var itemNum=$('#waterfull').find('.item').length;
                                               var itemArr=[];
                                              itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                                              itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                                              itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                                               var maxTop=Math.max.apply(null,itemArr);
                                               if(maxTop<$(window).height()+$(document).scrollTop()){
                                                        //加载更多数据
                                                        loading.data("on",false).fadeIn(800);
                                                        (function(sqlJson){
                                                                 /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
                                                                 if(itemNum>30){
                                                                           loading.text('就有这么多了!');
                                                                 }else{
                                                                           var html="";
                                                                           for(var i in sqlJson){
                                                                                    html+="<li class='item'><a href='#' class='a-img'><img src='"+sqlJson.src+"'></a>";
                                                                                    html+="<h2 class='li-title'>"+sqlJson.title+"</h2>";
                                                                                    html+="<p class='description'>"+sqlJson.intro+"</p><div class='qianm clearfloat'>";
                                                                                    html+="<span class='sp1'><b>"+sqlJson.looked+"</b>浏览</span>";
                                                                                    html+="<span class='sp2'>"+sqlJson.writer+"</span><span class='sp3'>"+sqlJson.date+" By</span></div></li>";              
                                                                           }
                                                                           /*模拟ajax请求数据时延时800毫秒*/
                                                                           var time=setTimeout(function(){
                                                                                    $(html).find('img').each(function(index){
                                                                                             loadImage($(this).attr('src'));
                                                                                    })
                                                                                    var $newElems = $(html).css({ opacity: 0}).appendTo(container);
                                                                                    $newElems.imagesLoaded(function(){
                                                                                             $newElems.animate({ opacity: 1},800);
                                                                                             container.masonry( 'appended', $newElems,true);
                                                                                             loading.data("on",true).fadeOut();
                                                                                             clearTimeout(time);
                                                                         });
                                                                           },800)
                                                                 }
                                                        })(sqlJson);
                                               }
                                     });
                                     function loadImage(url) {
                                          var img = new Image();
                                          //创建一个Image对象,实现图片的预下载
                                           img.src = url;
                                           if (img.complete) {
                                              return img.src;
                                           }
                                           img.onload = function () {
                                              return img.src;
                                           };
                                      };
                                      loadImage('images/one.jpg');
                                     /*item hover效果*/
                                     var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
                                     $('#waterfull').on('mouseover','.item',function(){
                                               var random=Math.floor(Math.random() * 4);
                                               $(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
                                     });
                                     $('#waterfull').on('mouseout','.item',function(){
                                               $(this).stop(true).animate({'backgroundColor':'#fff'},1000);
                                     });
                   })
    </script>
</head>
<body>
         <div class="content">
                   <!-- 瀑布流样式开始 -->
                   <div class="waterfull clearfloat" id="waterfull">
                            <ul>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t8.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t7.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t9.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t3.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t6.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t5.jpg" alt="">
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                              <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t10.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t2.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t8.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t7.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                                     <li class="item">
                                               <a href="#" class="a-img">
                                                        <img src="images/t9.jpg" alt="">
                                                      
                                               </a>
                                               <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">手把手教你用css3来创建loading动画(二)</h2>
                                               <p class="description">HTML 5以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信并不允许直接跨域通信并不允许直接跨域通信,于...</p>
                                               <div class="qianm clearfloat">
                                                        <span class="sp1"><b>688</b>浏览</span>
                                                        <span class="sp2">标题</span>
                                                        <span class="sp3">2小时前 By</span>
                                               </div>
                                     </li>
                            </ul>
                   </div>
                   <!-- loading按钮自己通过样式调整 -->
                   <div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
                   素材加载中.....
                   </div>
         </div>

</body>
</html>



版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2018-12-12 04:13
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表