时隔多日, 终于我又有时间来浏览些新知识了, 并不是偷懒什么的, 只是真的好忙, 看似闲暇的时间总是冒出一些模糊而又不得不做的事情, 今日终于我又有时间了, 可以看下jQuery了, 并根据自己的了解尝试着写了些demo, 就拿简单而又不失流行的瀑布流来说吧, 虽然看似简单, 但是做起来却并不是那么的容易, 以前对于这种瀑布流来说, 是可望而不可及啊, 尝试着用ios写, 但是总重因为种种原因终止了此项进程, 而今日我又重操往日的目标, 用不一样的语言来实现了这个功能, 还是有些许的欣慰的, 那么接下来就让我来给大家简单的说说吧.
一.准备工作
要进行此项任务的开工, 那么我们就不得不做充分的准备, 首先我们要去JQuery官网下载相应的文件网址如下:jquery.com, 由于网速原因, 在这里就不给大家一一详解了, 不过待大家进去后就会看到有个download, 然后进去下载就好, 里面对文档的解释也很详细, 有对css样式的操作和对H5的操作, 下载完成后的工程是这样的:jquery-2.1.4.min.js, 这就是下载的工程名字, 然后准备工作就算是ok了.
二.编码前沿
在下载完成后, 我们首先要打开开发环境, 将我们下载好的JQuery文件给拷贝进去, 然后在建好的h5页面进行引入, 当然引入这个还是不够的, 因为难免在布局时间会用到js和css文件, 所以我们要一并创建和引入, 结果如下:
要注意了, 引入顺序也是有要求的, 我们应当先引入JQuery文件, 其次才能引入其他文件, 那么编码前沿的工作也就做的差不多了, 接下来就是滤清思路开始编码了.
三.瀑布流的实现思路
所谓瀑布流, 也就是说图片宽度一样, 高度不同, 在第一行铺满图片的时候, 普第二行的时候, 我们要把要摆放的第一张图片放到第一行图片高度最小得那张图片下面, 然后再把摆放后的高度和第一行最短高度的图片进行叠加, 再次进行摆放, 依次重复此操作, 直到图片摆放完全, 那么我们的瀑布流就彻底的完成了, 接下来就可以看到完美的瀑布流效果了, 大致思路就是这样的, 相比很多人都是知道的, 哈哈!
四.编码阶段
在接下来的编码阶段我会每行代码都带上注释, 方便让大家看清楚, 可以彻底明白整个思路, 那么就算前面的描述有所模糊, 在下面的代码中也可以消除大家的疑惑了, 首先将准备好的图片拷贝到工程中, 然后在h5页面中书写下如下代码:
<body> <div id="container">//主容器 <div class="box">//容纳图片盒子的 <div class="contend">//容纳图片目的是为了给其边框效果, 下面都是一样的 <img src="img/1.jpeg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/5.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/7.gif"> </div> </div> <div class="box"> <div class="contend"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="contend"> <img src="img/2.jpg"> </div> </div> </div> </body>
之后在css文件中给这些div设置样式, 具体操作如下所示:
css中的代码
*{//通配符, 去掉所有的内外边距
padding: 0px;
margin: 0px;
}
.box{//设置内边距和浮动保证图片是逐次排开的
padding: 1px;
float: left;
}
.contend{//设置边框粗细和颜色装扮样式和阴影效果
border: 2px solid gray;
border-radius: 5px;
box-shadow: 0 0 10px red;
}
img{//设置图片宽度为定制高度自适应保证图片不失真
200px;
height: auto;
}
之后也是最关键的一步了, 就是在js文件中书写JQuery代码, 实现核心功能, 详细如下所示:
js中的代码 $(document).ready(function(){//判断文档是否准备完成 $(window).on("load",function(){//加载文档 ImageLocation();//此方法是为了确定图片位置 //模拟数据源, 自定义json字符串, 设置无限滚动加载 var dataImg = {"data":[{"src":"8.jpg"},{"src":"5.jpg"},{"src":"3.jpg"},{"src":"9.jpg"},{"src":"8.jpg"},{"src":"6.jpg"},{"src":"5.jpg"},{"src":"4.jpg"},{"src":"3.jpg"}]} //下面这个方法是在滚动鼠标或者滑动滚动条时间执行的, 目的在于判断何时开始加载图片, 我定义的是最后一张图片的一半的时候开始加载数据 window.onscroll=function(){ if(scollToSide()){ $.each(dataImg.data,function(index,value){ var box = $("<div>").addClass("box").appendTo("#container");//创建div标签追加在主容器之后, 用来承载图片盒子 var contend = $("<div>").addClass("contend").appendTo(box);//创建内容容器, 装饰图片样式 $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(contend);//加载图片 }); } ImageLocation();//重新调用确定图片位置方法, 以确保图片位置摆放和之前一样 } }) ; }); //此方法是为了判断何时加载, 当最后一张图片的高度小于屏幕窗口高度和滚动条滚动距离的时候开始加载, 否则不加载 function scollToSide(){ var box = $(".box"); var lastHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//Math方法目的在于将小数化为整数 var screenHeight = $(document).width(); var scrollHeight = $(window).scrollTop(); return lastHeight < (screenHeight + scrollHeight) ? true:false; } //确定图片摆放位置 function ImageLocation(){ var screenWidth = $(window).width();//获取当前屏幕宽度 var box = $(".box");//获取所有的box容器 var ImgWidth = box.eq(0).width();//获取图片宽度 var num = Math.floor(screenWidth / ImgWidth);//判断一个屏幕宽度内最多可以容纳多少张图片 var ary = [];//声明数组 box.each(function(index, value){ if(index<num){ ary[index]=box.eq(index).height();//承载第一行图片的高度 } else { var minHeight = Math.min.apply(null,ary);//取到第一行高度的最小值 var minIndex = $.inArray(minHeight,ary);//计算出最小高度的位置 $(value).css({//添加样式 top:minHeight, left:box.eq(minIndex).position().left, position:"absolute" }); ary[minIndex]+=box.eq(index).height();//进行高度叠加, 方便后面图片位置的确定 } }); }
这里面就是些核心代码了, 我之前有写过js实现瀑布流的demo, 并在此博客中发过, 那么我们就来对比下, 用这两种方法所写的瀑布流吧, 看起来效果是一样的, 但是js写起来确实非常复杂的, 而JQuery写起来却是非常简单的, 所以我个人认为这个还是比较简单的, 当然啦, 思路大体上还是一样的, 最终的选择还是看个人喜好了, 好了各位今天就写到这里了, 至于那个响应式布局在本demo中没有加进去, 如果有兴趣的朋友可以尝试着写下, 当然啦, 写好了欢迎与我一块分享哈, 我们共同学习, 共同进步了, 好了, 要开始其他任务了, 拜拜喽.