图片列表ajax加载 + 瀑布masonry布局 响应式网站

2534

HTML代码:

<div class="content">
        <div class="subnav">
                <a class="text-center <if condition='$bcid eq $catid'>on</if>" href="{$Categorys[$bcid]['url']}">所有案例</a>
            <YP:subcat catid="$bcid"> 
                <a class="text-center <if condition='$r["id"] eq $catid'>on</if>" href="{$r.url}">{$r.catname}</a>
            </YP:subcat>    
            </div>
        <!-- 瀑布流样式开始 -->
        <div class="waterfull clearfloat" id="waterfull">
            <ul>
            <volist name="list" id="k">
                <li class="item">
                    <a href="{$k.url}" class="a-img">
                        <img src="{$k.thumb}" alt="{$k.title}">
                    </a>
                    <p class="case-list-title"><a href="{$k.url}">{$k.subtitle}:<strong>{$k.title}</strong></a></p>
                    <div class="samll-gn">
                        <a class="scanned">浏览:{$k.hits}</a>
                        <a href="/#taocan" class="goumai">我要购买</a>
                        <a class="c-share"><span>F</span>分享</a>
                    </div>
                    <p class="case-list-intro">{:cutstr($k['description'],45,'...',0,'')}</p>
                </li>
            </volist>    
            </ul>
        </div>
        <!-- 瀑布流样式结束 -->
        <div class="hg30"></div>
        <!-- 加载动画 -->
        <div id="imloading" page="2" catid="{$catid}" cutstr="45" url="{:U('Ajax/catGet')}">玩命加载中...</div>
</div>

jquery代码:

<script type="text/javascript">
        $(function(){
                /*瀑布流开始*/
                var container = $('.waterfull ul'),
                    loading = $('#imloading');
                // 初始化loading状态
                loading.data("on",true);
                function tores(){
                    var tmpWid = $(window).width();
                    if(tmpWid > 1170){
                        tmpWid = 1170;
                    }else{
                        var column=Math.floor(tmpWid/320);
                        tmpWid = column*320;
                    }
                    $('.waterfull').width(tmpWid);
                }
                tores();
                $(window).resize(function(){
                    tores();
                });
                container.imagesLoaded(function(){
                  container.masonry({
                    columnWidth: 15,
                    itemSelector : '.item',
                    isFitWidth: false,
                    isAnimated: true,
                    isRTL:false,
                    isResizable: true,
                    animationOptions: {
                        duration: 700,
                        easing: 'easeInOutBack',
                        queue: false
                    }
                  });
                });
                //滚动数据
                $(window).scroll(function(){
                    if(!loading.data("on")) return;
                    var itemNum = $('#waterfull').find('.item').length,
                         page = loading.attr('page'), //页码
                         showUrl = loading.attr('url'), //地址
                         catid = loading.attr('catid'), //栏目ID
                         cutstr = loading.attr('cutstr');
                    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()){
                        if(page <= 0){
                            //页码为0 就直接返回不加载
                            return false;
                        }else{
                            //设置加载变量(设置一个数据 on)    
                            loading.data("on",false).fadeIn(500);
                            //请求数据
                            $.ajax({
                                    url: showUrl,
                                    type: 'GET',
                                    dataType: 'json',
                                    data: {catid:catid,page:page,cutstr:cutstr},
                                }).done(function (data) {
                                    //设置页码
                                    loading.attr('page',data.info); 
                                    if (data.status == 1) {
                                        var _html = '';
                                       //遍历数组
                                        $.each(data.data, function(i, k) {
                                                _html += "<li class=\"item\">";
                                                _html += "<a href="+ k.url +" class=\"a-img\">";
                                                _html += "<img src="+ k.thumb +" alt="+ k.title +">";
                                                _html += "</a>";
                                                _html += "<p class=\"case-list-title\"><a href="+ k.url +">"+ k.subtitle +":<strong>"+ k.title +"</strong></a></p>";
                                                _html += "<div class=\"samll-gn\">";
                                                _html += "<a class=\"scanned\">浏览:"+ k.hits +"</a>";
                                                _html += "<a href=\"/#taocan\" class=\"goumai\">我要购买</a>";
                                                _html += "<a class=\"c-share\"><span>F</span>分享</a>";
                                                _html += "</div>";
                                                _html += "<p class=\"case-list-intro\">"+ k.description +"</p>";
                                                _html += "</li>";
                                        });
                                            //定时显示
                                            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},500);
                                                            container.masonry( 'appended', $newElems,true);
                                                            loading.data("on",true).fadeOut();
                                                            clearTimeout(time);
                                                    });
                                                },500)
                                        } else {
                                            loading.attr('page',0);
                                            loading.text('内容已加载完...').fadeOut(500);
                                        }
                                    });
                            }
                    }
                });
                //图片预加载...
                function loadImage(url) {
                     var img = new Image(); 
                     //创建一个Image对象,实现图片的预下载
                      img.src = url;
                      if (img.complete) {
                         return img.src;
                      }
                      img.onload = function () {
                        return img.src;
                      };
                 };
                loadImage('/Public/i3me/images/case-3.jpg');
        })
    </script>

这是jquery 插件:官网地址:http://masonry.desandro.com/ 

<script type="text/javascript" src="__PUBLIC__/js/jquery.masonrypubu.min.js"></script>

<script type="text/javascript" src="__PUBLIC__/js/jqeasing-pubu.js"></script>


玄玄博客:http://www.blogxuan.com/