网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

您所在的位置：网站首页 › 网页设计图片排版代码怎么用的 › 网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

2024-07-15 19:31| 来源: 网络整理| 查看: 265

文章目录 1.什么是瀑布流？2.制作瀑布流样式3.瀑布流的scroll滚轮创建

操作之前，必须对以下知识语言熟悉：HTML、CSS、JavaScript和jQuery。

1.什么是瀑布流？

在我们百度搜索图片的时候经常看到，图片非常整齐排列有序的给你列出来,就好像下面图片一样。

在这里插入图片描述

图片会自动跟进，而不会错杂开来，就像瀑布一样，这就是网页设计的瀑布流样式。

2.制作瀑布流样式

首先，在百度中copy几张图片，保证能填满网页框架，来为网页添加img样式。

这里我复制了几张猫咪图片，放在了images目录下：在这里插入图片描述在编译器中构造相应代码，这里我用的sublime 编译器，使用其他的都可以，但是格式必须对的！！！

首先，创建一个html文件，代码如下：

*{ 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; }

然后，在写一个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 = $("").addClass("pin").appendTo("#main"); var box = $("").addClass("box").appendTo(pin); var 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

【本文地址】

网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

今日新闻

推荐新闻