界面实例--图片布局在前端
图片布局在前端很多时候的时候因为图片本身大小长宽比例不同，想要布局得好看，需要注意几点问题，下面写一写怎么布局，主要讲的是<img>元素，需要自己定制形状的可以考虑canvas，前面有讲。
先看看<img>默认布局的特点，<img>是行内元素，不设置大小的时候按图片原本大小显示，每个<img>之间有一个字的间隙，会换行。vertical-align的默认值是baseline。
可以设置vertical-align或者设置img的宽高，设置img的宽和高有以下三种方法：
-
-
-
- 设置宽，高度自适应，适合垂直布局
- 设置高，宽度自适应，适合水平布局
- 同时设置宽和高，会产生拉伸变形，不推荐
-
-
1、水平布局
百度图片采用的就是这个方法，设置图片的高。
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="css/myscroll.css"> <style> .image-container{ width:90%; margin:0 auto; } .image-container>img{ margin-top:10px; height:300px; } </style> </head> <body> <div class="image-container"> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </body> </html>
2、垂直布局
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> <link rel="stylesheet" href="css/myscroll.css"> <style> .image-container{ width:90%; margin:0 auto; } .image-container>div{ display:inline-block; width:30%; vertical-align:top; } .image-container>div>img{ margin-top:10px; width:100%; } </style> </head> <body> <div class="image-container"> <div> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> </div> <div> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> </div> <div> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </div> </body> </html>
3、鼠标悬浮在图片上面图片变大
利用css的transform来进行设置，纯html+css就可以实现，不过img还是受限于外面的容器，如果外部的div有overflow:hidden；img就算放大也会被截掉一部分。下附完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ margin:10% auto; } div>img{ cursor: pointer;/*手*/ transition: all 0.6s; } div>img:hover{ transform: scale(1.5); } </style> </head> <body> <div> <img src='img/10.png' width="300px" height="300px"/> <img src='img/9.png' width="300px" height="300px"/> <img src='img/8.png' width="300px" height="300px"/> <img src='img/7.png' width="300px" height="300px"/> </div> </body> </html>
4、显示在一行之中进行滚动播放
包括了hidden滚动条，另外设置滚动条件
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .image-container{ width:90%; height:285px; overflow:hidden; margin:100px auto; margin-bottom:0; } .image-container>.imgs{ height:300px; width:100%; white-space: nowrap;/*强制不换行*/ overflow-x:auto; overflow-y:hidden; } .image-container>.imgs>img{ height:100%; } .command-container{ width:90%; height:15px; margin:0 auto; text-align:center; } .command-container>.command-button{ background:#009688; color:white; padding:10px; display:inline-block; width:50px; border-radius:5px; } .command-container>.command-button:hover{ background:#119999; //background:#5FB878; } </style> </head> <body> <div class="image-container"> <div class="imgs"> <img src='img/1.jpg'/> <img src='img/2.jpg'/> <img src='img/3.jpg'/> <img src='img/4.jpg'/> <img src='img/5.jpg'/> <img src='img/6.png'/> <img src='img/10.png'/> <img src='img/9.png'/> <img src='img/8.png'/> <img src='img/7.png'/> <img src='img/11.png'/> <img src='img/7.png'/> </div> </div> <div class="command-container"> <div class="command-button">上翻</div> <div class="command-button">下翻</div> </div> <script> window.onload=function(){ var buttons = document.getElementsByClassName('command-button'); var img = document.getElementsByClassName('imgs')[0]; var container = document.getElementsByClassName('image-container')[0]; buttons[0].addEventListener('click',function(){ var left = container.offsetWidth*0.5; img.scrollLeft = img.scrollLeft-left; //console.log(img.scrollWidth); }); buttons[1].addEventListener('click',function(){ var left = container.offsetWidth; img.scrollLeft = img.scrollLeft+left; //console.log(img.scrollWidth); }); } </script> </body> </html>
5、加一个图片懒加载的实现
参考：https://www.jianshu.com/p/8e2a73638153
事实上，会有一个问题，我不知道是我自己之前写的有问题或是别的什么原因。我发现一开始时懒加载根本没有实现，打开后台看所有图片都是在刷新界面时全部加载了，即使大部分图片相对不可见，后来我发现了问题。
图片懒加载的实现原理是：1、将所有图片的src指向默认图片，那么一开始就只需要加载默认图片。2、根据图片自身的offsetTop，以及父元素的height、scrollTop判断是否有滑动到使得当前图片可见，有，则更改src，加载图片。3、既然这样，一开始，在滑动界面前需要加载一开始就可见区域的图片。
我的问题出现在第三个，一开始所有图片的offsetTop都是0，反倒是offsetLeft有递增，当我滑动页面的时候一切则又变得正常了，所以我在尝试了一会决定设定一开始加载前10张照片，判断是否可见的操作在滑动页面后再做。但是我并没有找到原因，主页面的代码是很久之前写的，设置了主页面不可滑动，其他又设置了什么不太记得了。。。。。又或者是别的原因？
