<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background-color: #ccc; } .waterfall{ width: 790px; margin: 0 auto; position: relative; } .grid{ position: absolute; width: 230px; background-color: white; padding: 10px; border-radius: 15px; } .grid img{ width: 230px; } .grid .title{ font-weight: bold; font-size: 18px; line-height: 32px; } .grid .neirong{ line-height: 150%; font-size: 14px; margin-bottom: 20px; } .grid .zuozhe{ float: right; color:orange; font-size: 12px; } .loading{ margin: 0 auto; width: 400px; line-height: 30px; text-align: center; font-size: 14px; background-color: gold; color:white; } </style> </head> <body> <div> </div> <div> 正在加载... </div> <script type="text/template"> <div> <img src="https://www.jb51.net/<%=imgurl%>" alt="" /> <p><%=title%></p> <p><%=content%></p> <p><%=author%></p> </div> </script> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/underscore.js"></script> <script type="text/javascript"> // 定义变量和对象 // 获取引擎模板中发的内容，使用jquery转化成字符串 var templateString = $("#grid_template").html(); // 把转化后的字符串绑定在compileFunction函数上! var compileFunction = _.template(templateString);//_.template（）返回的是一个函数！ // console.log(typeof(compileFunction)); //function //转换成jquery对象,为了后面使用jquery的方法 var $waterfall = $("#waterfall"); var $loading = $(".loading"); //三列瀑布流，每列的总高度 var colHeight = [0,0,0]; // 这是三列的高度数组，与里面的数值无关，表示index的顺序 // console.log(colHeight); // 获取数据 //信号量 var page = 1; getJSONandRender(page); function getJSONandRender(page){ // 为了增加用户体验 $loading.show(); //发出ajax请求 $.get("json/json" + page + ".txt",function(data){ //输出字符串 //转为对象 var dataObj = eval("(" + data + ")"); //解析ajax数据，转换成对象！ //没有更多数据了 // dataObj.news.length来自后台json if(dataObj.news.length == 0){ $loading.show().html("没有更多了"); return; //在这里截止后，lock也会截止 } // 遍历函数，动态获取下标值根据绝对定位的位置进行排列！ _.each(dataObj.news,function(dictionary){ //每遍历一次，执行一次函数！ //这是系统内置构造函数 var image = new Image(); //实例化一个对象分配内存空间 // 当对象被实例化后，构造函数会立即执行它所包含的任何代码 image.src = dictionary.imgurl; //我们现在给image转为jQuery对象，然后绑定事件 $(image).load(function(){ // console.log(dictionary.imgurl + "加载完毕"); var domString = compileFunction(dictionary); // console.log(typeof(domString)); var $grid = $(domString); $waterfall.append($grid); //根据瀑布流算法，设置它的left、top // 最小值 minValue = _.min(colHeight); // 最小值的位置！ minIndex = _.indexOf(colHeight,minValue); $grid.css({ "top" : minValue, "left" : minIndex * 270 }); //改变总列高数组的值 colHeight[minIndex] += $grid.outerHeight() + 10; //让大盒子根据最高的列设置高度 $waterfall.css("height",_.max(colHeight)); //隐藏loading文本 $loading.hide(); }); }); lock = true; }); } var lock = true; //监听滚动 $(window).scroll(function(){ if(!lock) return; var rate = $(window).scrollTop() / ($(document).height() - $(window).height()); if(rate >= 0.7){ page ++; getJSONandRender(page); lock = false; } }) </script> </body> </html>
利用jquery实现瀑布流3种案例(3)
内容版权声明：除非注明，否则皆为本站原创文章。