jQuery瀑布流插件Grid-A-Licious_jQuery延迟加载响应式CSS瀑布流插件
2014-09-29 14:22:35  By: dwtedx

相信很多朋友也和我一样、觉得瀑布流的布局很好看、也想要实现这样的效果

前段时候我也分享过一个JQUERY MASONRY瀑布流插件、JQUERY网页瀑布流布局插件例子

那么今天、我再和大家分享我最近研究的一个 jQuery 的插件、非常不错、实现了响应式的瀑布流

要建立响应式瀑布流、可以使用jQuery插件:Grid-A-Licious、Grid-A-Licious 是一个简单易用的 jQuery 插件

可用于创建响应式瀑布流布局、针对不同设备可自动适应宽度、并且效率比较高

你可以通过参数设置它的宽度以及动态显示时的速度、延迟等等、定制性是比较高的

先一起来看一下最主要的 jQuery 代码

//模拟滚动条滚动时随机添加内容
makeboxes = function() {
	var boxes = new Array;   
	var randTxt = [´dwtedx个人博客 - dwtedx.com´,´JS代码免费下载´];
	var amount = Math.floor(Math.random()*10); 
	for(i=1;i<amount;i++){
		num = Math.floor(Math.random()*randTxt.length); 
		div = $(´<div></div>´).addClass(´item´); 
		content = "<img src=´images/"+i+".jpg´/><p>"+randTxt[num]+"</p>";
		div.append(content);
		boxes.push(div);
	}
	return boxes;
}
//滚动条事件
$(document).ready(function () {         
	$(window).scroll(function () {
		if(($(window).scrollTop() + $(window).height())
			== $(document).height())
		{
			$("#device").gridalicious(´append´, makeboxes());
		}
});
//主要部分
$("#device").gridalicious({
	gutter: 20,
	width: 300,
	animate: true,
	animationOptions: {
			speed: 150,
			duration: 400,
			complete:function(data){
				console.log("dwtedx个人博客 - dwtedx.com");	
			}
	},
});
});
HTML 代码也比较简单

<div class="galcolumn">
  <div class="item"><img src="images/1.jpg"/><p>dwtedx个人博客</p></div>
  <div class="item"><img src="images/2.jpg"/><p>dwtedx个人博客</p></div>
  <div class="item"><img src="images/3.jpg"/><p>dwtedx个人博客</p></div>
  <div class="item"><img src="images/4.jpg"/><p>dwtedx个人博客</p></div>
  <div class="item"><img src="images/5.jpg"/><p>dwtedx个人博客</p></div>
  <div class="item"><img src="images/6.jpg"/><p>dwtedx个人博客</p></div>
</div>
好了、这样一个非常炫的瀑布流网页就做好了、希望对大家有帮助

最后是源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjLj4JF 密码: 1gyx

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+