jquery仿花瓣网瀑布流实例模板

jquery仿花瓣网瀑布流实例模板效果如下：

使用到的插件：

jquery.js

jquery.masonry.js

jquery.infinitescroll.js

jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。

html的基本代码：

<div class="item_list infinite_scroll">
 
    <div class="item masonry_brick">
        <div class="item_t">
            <div class="img">
                <a href=""><img width="210" height="285" src="images/pic/01.jpg" /></a>
                <span class="price">￥195.00</span>
                <div class="btns">
                    <a href="" class="img_album_btn">加入专辑</a>
                </div>
            </div>
            <div class="title"><span>js lazyload实现网页图片延迟加载特效</span></div>
        </div>
        <div class="item_b clearfix">
            <div class="items_likes fl">
                <a href="" class="like_btn"></a>
                <em class="bold">916</em>
            </div>
            <div class="items_comment fr"><a href="">评论</a><em class="bold">(0)</em></div>
        </div>
    </div><!--item end-->

主要的jquery代码：

function item_masonry(){ 
    $('.item img').load(function(){ 
    $('.infinite_scroll').masonry({ 
        itemSelector: '.masonry_brick',
        columnWidth:226,
        gutterWidth:15                              
    });     
    }); 
    $('.infinite_scroll').masonry({ 
    itemSelector: '.masonry_brick',
    columnWidth:226,
    gutterWidth:15                              
    }); 
}
   
$(function(){
    function item_callback(){   
        $('.item').mouseover(function(){
        $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
        $('.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();
            $("#page").show();
            $(window).unbind('.infscr');
            }
        }   
        },errorCallback:function(){ 
        $("#page").show();
        }
    },function(newElements){
        var $newElems = $(newElements);
        $('.infinite_scroll').masonry('appended', $newElems, false);
        $newElems.fadeIn();
        item_callback();
        return;
    });
});