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 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 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用substr函数截取字符串中的某部分
2016/12/03 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
使用webpack构建应用的方法步骤
2019/03/04 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
浅析python中while循环和for循环
2019/11/19 Python
Python如何生成xml文件
2020/06/04 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
华三通信H3C面试题
2015/05/15 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
给学校建议书范文
2014/05/13 职场文书
小学生运动会广播
2015/08/19 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle