jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

课程推荐:Java开发工程师--学习猿地精品课程

jQuery插件实现瀑布留布局masonry + infinitescroll 。 使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题,导致图片高度不能被正确识别,从而造成层的重叠。 解决方法就是使用imagesLoaded加载。

mamicode.com,码迷
var $container = $(‘#flow‘);
$(‘#flow‘).imagesLoaded(function(){
$(‘#flow‘).masonry({
itemSelector: ‘.box‘,
gutterWidth: 20,
columnWidth: 238
});
});
mamicode.com,码迷
这样解决了第一次加载时候的问题,但是当异步请求之后加载的图片仍然无法正确的获取高度,解决的办法就是先将下载的图片隐藏,等图片下载完毕后再使用masonry渲染。代码如下:

mamicode.com,码迷
$(‘#flow‘).infinitescroll({
loading : {
msgText : "正在加载",
img: "http://www.infinite-scroll.com/loading.gif",
finishedMsg : "木有了哦..."
},
navSelector : "#plist",
nextSelector: "#plist a",
itemSelector: ".box",
pixelsFromNavToBottom: 100,
animate: true
},function(newElements) {
     //先隐藏
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
      //图片显示后再进行masonry渲染
$newElems.animate({ opacity: 1 });
$container.masonry( ‘appended‘, $newElems, true );
});
});
mamicode.com,码迷
这样就很好的解决了图片加载的问题。

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理,码迷,mamicode.com

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

标签:com http blog style class div img code java javascript log

原文地址:http://www.cnblogs.com/aleafo/p/3695816.html

Image placeholder
gaojian
未设置
  0人点赞

没有讨论,发表一下自己的看法吧

推荐文章
什么是jquery插件?

什么是jquery插件?jQuery插件,就是开发爱好者自己利用Jquery制作的特效,然后经过封包或包装处理成js文件,发布到网上供大家使用的脚本集合。通常这类插件除了调用jQuery库文件,还需要

jquery如何获取隐藏元素的高度?

jquery如何获取隐藏元素的高度?jquery获取隐藏元素的高度可以直接使用height()方法。例如: #app{ width:100px; height:1000px; display:no

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

用原生 JavaScript 实现十大 jQuery 函数

在本文中我将把自己最常用的jQuery函数转换为原生JavaScript。有时我需要创建一个简单的静态HTML或登录页面,而且不想引入任何库或其它依赖。对这种情况,我只使用普通的JavaScript来

jquery和javascript有关系吗?

jquery和javascript有关系吗?有关系,具体的关系是:jquery是基于JavaScript编写的,jquery全部都是JavaScript代码组成。jquery和javascript的关

jQuery JavaScript ajax区别

jQueryJavaScriptajax区别简单总结:1、JS是一门前端语言。2、Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。3、jQ

如何使用jQuery的插件?

如何使用jQuery的插件?例如:需要使用表单插件,按下列步骤就可实现插件的调用:(1)在页面中导入包含表单插件的JS文件,并确定它定位与主jQuery库后,其代码如下: (2)在JS文件或页面J

自定义组件实现v-model双向数据绑定

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定。//表单控件上使用v-model {{name}} exportdefault{ data()

清华大学教授马智亮:如何走向高度智慧建造?

什么是智慧建造?普遍意义上的智慧建造是指生物基于神经器官所具有的一种高级的综合能力,包括感知、知识、记忆、理解、联想、情感、逻辑、辨别、计算、分析、判断、文化等多种能力。显然,具备这种能力的生物,首当

华为胡厚崑:共创智能新高度

华为全联接大会旨在搭建开放、合作、共享的平台,携手来自全球的ICT产业各方,包括业界思想领袖、商业精英、技术大咖、先锋企业、生态合作伙伴、应用服务商以及开发者等,共同探讨产业发展方向和未来机遇,展示I

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

jquery如何判断图片是否加载完成?

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用loading的gif图表示正在加载中。一、普通方法监听i

jquery hasClass()方法怎么用?

jqueryhasClass()方法怎么用?hasClass()方法验证匹配元素是否包含指定的类,包含则返回true,否则返回false。语法结构:$(selector).hasClass(class

jquery怎么遍历json数组?

jquery怎么遍历json数组?jquery遍历集合可以使用$.each(集合,回调函数)方法,//这里直接使用Array来构造json数组,服务器返回的数据可以使用JSON.parse()函数进行

jquery怎么操作json?

使用jquery中的$.parseJSON()将字符串转为json对象,它对json数据格式的要求较高,必须要双引号包围起来格式:$.parseJSON(string)例如: varjsonStr='

jquery判断是否是json

jquery判断是否是json思路:使用jquery的parseJSON,将字符串转为json对象,并用trycatch语句捕获错误,没有异常,则是json格式,否则不是。functionfun(st

jQuery getJSON()方法怎么用?

jQuerygetJSON()方法怎么用?getJSON()方法使用AJAX的HTTPGET请求获取JSON数据。语法:$(selector).getJSON(url,data,success(dat

jquery如何判断是否为json格式?

jquery如何判断是否为json格式?思路:使用jquery的parseJSON()方法,将字符串转为json对象,并用trycatch语句捕获错误,没有异常,则是json格式,否则不是。funct

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

jquery ajaxError()方法怎么用?

jqueryajaxError()方法怎么用?ajaxError()方法规定AJAX请求失败时运行的函数。注意:自jQuery版本1.8起,该方法只被附加到文档。语法:$(document).ajax

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

jQuery中attr()和prop()的区别?

attr():attr()方法设置或返回被选元素的属性和值。当该方法用于返回属性值,则返回第一个匹配元素的值。当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。prop():prop()方

jquery中prop()和attr()之间有什么区别?

1、操作对象不同很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。不过,在jQuery中,attribute和property却是两个不同的

jquery中prop()怎么用?

使用此方法返回属性值时,将返回第一个匹配元素的值;使用此方法设置属性值时,将为选定元素设置一个或多个属性。注意:prop()方法应该用于检索属性值,例如DOM属性(如selectedIndex,tag

jquery中attr和prop的区别是什么?

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。jq