HTML+CSS+JS实现瀑布流布局
前言一、总体效果二、HTML+CSS简单布局三、JS实现后续布局总结
前言
瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例:
相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧!
我们可以发现图中每个商品框的高度不同的，因此导致我们的商品图片的高度布局都不在一个高度上。在百度搜索图片的时候我们发现每张图片的宽度都是不一样的那为什么所用图片的宽度它能刚刚好的占满一行呢?
这就是我今天今天教大家的布局方式——waterfall布局，那该怎么实现呢？那我们就不多说啦，直接上干货!
一、总体效果
瀑布流的搭建完的效果如下：
二、HTML+CSS简单布局
首先大家在网上搜索一些图片或者用一下自己喜欢的图片均可，用html搭建好框架网页的框架将图片存放好，我们这里使用的了20张图为例。其次使用html+css实现一个简单的布局，这有个关键的步骤：我们对比上面百度和淘宝页面的瀑布流布局就不难发现，要实现瀑布流所有图片都得有个相同的高度或者高度。因此我们这就给所用照片设置一个固定的宽度，但不限定的图片的高度保证每图片都按其原始比例完整展示出来。HTML，CSS代码如下：
css代码*{margin:0;padding:0;}#container{position:relative;}.box{float:left;/*给每个存放照片box设置为浮动元素，让所有的图片浮动到网页的第一行*/padding:5px;}.box-img{width:px;padding:5px;border:1pxsolid#ccc;box-shadow:px#ccc;border-radius:5px;}.box-imgimg{width:%;height:auto;}html代码!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8meta