jquery 插件实现瀑布流图片展示实例


Posted in Javascript onApril 03, 2015

jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。

代码:

<script type="text/javascript">
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;
  });
 
});
</script>

演示图片

jquery 插件实现瀑布流图片展示实例

以上所述就是本文的全部内容了,希望能够对大家学习jQuery有所帮助。

Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 #Javascript
Javascript代码实现仿实例化类
Apr 03 #Javascript
使用Jquery实现每日签到功能
Apr 03 #Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 #Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 #Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 #Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 #Javascript
You might like
php daodb插入、更新与删除数据
2009/03/19 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
jquery日历插件datepicker用法分析
2016/01/22 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python Django批量导入数据
2016/03/25 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
如何在python中实现随机选择
2019/11/02 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
python中uuid模块实例浅析
2020/12/29 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
理货员的岗位职责
2013/11/23 职场文书
自我评价正确写法范文
2013/12/10 职场文书
开业主持词
2014/03/21 职场文书
项目建议书模板
2014/05/12 职场文书
建材投资建议书
2014/05/16 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年档案室工作总结
2014/12/01 职场文书
档案工作个人总结
2015/03/03 职场文书
信息简报范文
2015/07/21 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang