jquery 实现瀑布流效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 实现瀑布流效果相关的知识，希望对你有一定的参考价值。
布局的原理： 用一个类名为item的div作为图片的容器，每个item的宽都相等，高度自适应，使用绝对定位。第一行的item只需要处理left就不详细说了。第二行以后：获取到第一行的item的高度作为这一列的高度，找到其中最小的值，那么从第二行开始的item的top值就等于这个值，而left就等于这一列的left，这个时候这一列的高度+=当前处理的item的高度。
附上详细代码
html部分：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="picturewall"></div> </body> </html>
CSS:
*{ font-family: "microsoft yahei",sans-serif; padding: 0; margin: 0; } #picturewall{ width: 940px; height: auto; margin: 0 auto; position: relative; } .item{ width: 300px; height: auto; box-sizing: border-box; border: 1px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 15px #666; -moz-box-shadow: 0 0 15px #666; box-shadow: 0 0 15px #666; position: absolute; text-align: center; } .item>img{ height: auto; width: 280px; display: block; margin: 10px; }
jquery :
$(function(){ //用数组存放图片的文件名 var pictureSources = [ "31bbb105bf1ce318ffd72de5fd601614edda4cd61d278-IjoIRf_fw658.jpg", "57a70575f8a78ffe9d65297e0f75be89a61f14fa3988b2-LgCVaH_fw658.jpg", "6182b15541cb11f6de40ccd9be7239861ba946de26304a-p6giW6_fw658.jpg", "6c0898eb4b898db935c27f8c3319d54b34104e8b22fd8-oKLgCV_fw658.jpg", "9d5992e5231864f09748b6d5f7b03165821bdb4bffc3e-0n27FJ_fw658.jpg", "a1c7f703728f99e7e59fd8c9c250ef8536fa8ae0327fd7-Uh635n_fw658.jpg", "c627789a24da25b438a3d86310e97612f697316bd970-YXUyG9_fw658.jpg", "d7e78fc59a0c102c282a154177ed730295634a241d907-ELAB1U_fw658.jpg", "dcc0754632a597e2ab91ce85eabca8fa71842ac71647e-2pRt4q_fw658.jpg" ]; var base = "picture\\/"; //item 元素的基本结构 var baseElem = $("<div class=‘item‘></div>").append("<img/>").append("<hr/>").append("<h4>description</h4>"); //实现瀑布流布局的函数 function waterfall(){ var items = $("div.item");//获取到所有的类名为item的元素 var postop = [];//这个数组用来存放item定位的高度 var itemWidth = items.eq(0).width()+10;//宽度都是一样的所有随便获取一个就行 items.each(function(index,elem){ var targetItemTop = items.eq(index).height()+10;//遍历所有item并获取高度 if(index < 3){//如果是在第一行 postop[index] = targetItemTop;//把高度直接加入数组中 $(elem).css({ "left":310*index,//设置left "top": 10//和top }); }else{ //其他行 var mintop = Math.min.apply(null,postop);//获取数组中最小的一个 var minindex = $.inArray(mintop,postop);//获取到数组最小值对应的排序 $(elem).css({ "top":mintop+10,//设置top为数组中最小值 "left":parseInt(items.eq(minindex).css("left"))//设置left }); } postop[minindex] += $(elem).height()+10;//更新数组 }); } //添加item的函数 function getItems(){ for(var i = 0; i < pictureSources.length; i++){ baseElem.clone().hide().children("img").attr("src",base+pictureSources[i]).bind("load",function(){ waterfall(); $(this).parent().fadeIn(500); }).end().appendTo("#picturewall"); } } //判断文档滚动的位置 function wheelListen(){ var srollHeight = $(document).scrollTop(); if(srollHeight+$(window).height() >= $(document).height()-100){ getItems(); } } //绑定事件 $(window).on("load",function(){ getItems(); $(document).bind("mousewheel DOMMouseScroll",function(){ wheelListen(); }); }) });
效果图：
通过滚动鼠标滚轮可以实现图片无限加载，配合上ajax基本上就完成了。
以上是关于jquery 实现瀑布流效果的主要内容，如果未能解决你的问题，请参考以下文章