admin管理员组文章数量:1794759
网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】
文章目录
- 1.什么是瀑布流？
- 2.制作瀑布流样式
- 3.瀑布流的scroll滚轮创建
操作之前，必须对以下知识语言熟悉：HTML、CSS、JavaScript和jQuery。
1.什么是瀑布流？在我们百度搜索图片的时候经常看到，图片非常整齐排列有序的给你列出来,就好像下面图片一样。
图片会自动跟进，而不会错杂开来，就像瀑布一样，这就是网页设计的瀑布流样式。
2.制作瀑布流样式首先，在百度中copy几张图片，保证能填满网页框架，来为网页添加img样式。
这里我复制了几张猫咪图片，放在了images目录下： 在编译器中构造相应代码，这里我用的sublime 编译器，使用其他的都可以，但是格式必须对的！！！
首先，创建一个html文件，代码如下：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <script type="text/javascript" src="cdn.bootcdn/ajax/libs/jquery/3.6.0/jquery.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } #main{ position: relative; } .pin{ padding:15px 0 0 15px; float: left; } .hox{ padding: 5px; border: 1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .box img{ width: 236px; height: auto; } </style> </head> <body> <div id="main"> <div class="pin"> <div class="box"> <img src="images/1.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/2.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/3.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/4.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/5.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/6.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/7.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/美女.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/8.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/9.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/10.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/11.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/12.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/13.jpg"> </div> </div> <div class="pin"> <div class="box"> <img src="images/14.jpg"> </div> </div> </div> <script type="text/javascript" src="pubu.js"></script> </body> </html>然后，在写一个pubu.js文件程序，代码如下：
$(document).ready(function(){ //等图片加载完成之后在显示 $(window).on("load",function(){ ImgLocation(); var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"}]}; $(window).scroll(function(){ //获取最后一张图片距离顶端的高度-也就是他自身的一半。 if(getSideHeight()){ $.each(dataImg.data,function(index,value){ var pin = $("<div>").addClass("pin").appendTo("#main"); var box = $("<div>").addClass("box").appendTo(pin); var img = $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(box); }); ImgLocation(); } }) }) }); function getSideHeight(){ var box = $(".pin"); var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2); var documentHeight = $(document).height();//获取当前窗口的一个高度 var scrollHeight = $(window).scrollTop();//获取滚动的距离。 return (lastImgHeight<documentHeight+scrollHeight)?true:false; } function ImgLocation(){ var box=$(".pin"); //获得一个.pin的数组 var boxWidth=box.eq(0).width(); //eq()方法返回带有被选元素的指定索引号的元素。 var num=Math.floor($(window).width()/boxWidth); //一行能摆放图片的个数 var numArr=[]; box.each(function(index,value){ //each() 方法规定为每个匹配元素规定运行的函数。 var boxHeight=box.eq(index).height();//获取每张图片的高度。 //console.log(boxHeight); if (index<num) {//第一排图片 numArr[index] = boxHeight; }else{//第二排图片 //Math.min可以获得最小的一项，apply()方法可以获得项的值。 var minboxHeight = Math.min.apply(numArr,numArr); // console.log(minboxHeight); //方法jQuery.inArray(value,数组,数组的索引值默值为0) //$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1） var minIndex = $.inArray(minboxHeight,numArr); //得到最小高度图片的索引值 // console.log(minIndex); $(value).css({ position:"absolute", top:minboxHeight, left:box.eq(minIndex).position().left }); numArr[minIndex] += box.eq(index).height(); //设定了一个新高度 } }) }注意图片存放的位置，我这里存放在了代码目录下的images目录下了。
完成上面操作，就可以运行来查看一下结果了。
3.瀑布流的scroll滚轮创建在上面代码中，运行后可以发现，可以不断重复1.jpg和2.jpg，中间加入了scroll滚轮和元素创建的一些相关内容，一定要仔细理解注释！！ 滚轮样式如图下：
循环出现，1.jpg和2.jpg的图片了。
这样就完成了一个瀑布流的图片显示。
版权声明：本文标题：网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686623684a87603.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论