瀑布流JQ特效代码

最新推荐文章于 2023-04-23 17:19:47 发布

诗墨

最新推荐文章于 2023-04-23 17:19:47 发布

阅读量587

点赞数 1

文章标签：前端编程瀑布流 jquery

本文链接：https://blog.csdn.net/hyn150/article/details/70662282

版权

本文分享了一段使用jQuery实现的瀑布流效果代码。通过鼠标滚动，图片会自动加载并填补空白，呈现错落有序的瀑布流布局。适合前端初学者参考学习。

摘要由CSDN通过智能技术生成

自己在做java以前，自学过一段时间的前端，最近没事翻出来以前写过的一些前端的小案例，现在感觉也挺好玩，今天特地分享出来，感兴趣的朋友可以看看，虽然技术含量倒不是很多，但是回忆起当初自学过的那段经历，感觉还挺欣慰的，对于学习编程来说，自学真的挺煎熬的，但是要是真的能钻进去也就乐在其中了。

瀑布流的效果呢就是，鼠标向下滑，图片会自动加载，一直滑，图片自动补位空缺的地方，让图片错落有序的排列，如同看瀑布一般。

废话不多说上源码：

$(function(){

imgLocation()
var imgData = {"Data":[{"images":"0.jpg"},{"images":"1.jpg"},{"images":"2.jpg"},{"images":"3.jpg"},{"images":"4.jpg"},
						   {"images":"5.jpg"},{"images":"6.jpg"},{"images":"7.jpg"},{"images":"8.jpg"},{"images":"9.jpg"},
						   {"images":"10.jpg"},{"images":"11.jpg"},{"images":"12.jpg"},{"images":"13.jpg"},{"images":"14.jpg"},
						   {"images":"15.jpg"},{"images":"16.jpg"}]}//这里的images是图片的路径

$(window).scroll(function(){
	if(check()){
	$.each(imgData.Data,function(key,value){
		var oBox=$("<div>").addClass(