怎么实现瀑布流布的局

　　介绍

本篇文章给大家分享的是有关怎么实现瀑布流布的局,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>一、JS实现瀑布流

<强>思路分析

<李>

瀑布流布局的特点是等宽不等高。

<李>

为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。

<李>

父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置前值和左值定位每个元素。

<强>代码实现

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; style> 　　,,,,,,,.box  { 　　,,,,,,,,,,,宽度:,100%; 　　,,,,,,,,,,,位置:相对; 　　,,,,,,,} 　　,,,,,,,.item  { 　　,,,,,,,,,,,位置:,绝对; 　　,,,,,,,} 　　,,,,,,,.item  img { 　　,,,,,,,,,,,宽度:,100%; 　　,,,,,,,,,,,身高:100%; 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癰ox"祝辞 　　,,,& lt; div 类=癷tem"比; 　　,,,,,,,& lt; https://www.yisu.com/zixun/img , src=" banner.jpg " alt="/> 　　
　　
　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　<div class= 　　/> 　　</div> 　　</div> 　　</身体> 　　<script src= 　　<>脚本 　　函数瀑布(){//1确定图片的宽度——滚动条宽度 　　.width-8 var pageWidth=getClient (); 　　var列=3;//3列 　　var itemWidth=方法(pageWidth/列);//得到项目的宽度 　　$ (" .item ") .width (itemWidth);//设置到项目的宽度 　　var arr=[]; 　　$ ("。盒子.item”) . each(函数(我){ 　　身高=$ var(这);(img) .height (); 　　如果(我<列){//2第一行按序布的局 　　$ (). css ({ 　　上图:0, 　　左:(itemWidth) + 20 * *我, 　　});//将行高推到数组 　　arr.push(高度); 　　其他}{//其他行//3找到数组中最小高度和它的索引 　　var minHeight=arr [0]; 　　var指数=0; 　　(var j=0;j arr [j]) { 　　minHeight=arr [j]; 　　指数=j; 　　} 　　}//4设置下一行的第一个盒子位置//前值就是最小列的高度 　　$ (). css ({ 　　上图:加勒比海盗(指数)+ 30,//设置30的距离 　　左:$ ("。盒子.item”) .eq(索引). css(“左”) 　　});//5修改最小列的高度//最小列的高度=当前自己的高度+拼接过来的高度 　　arr(指数)=arr(指数)+身高+ 30;//设置30的距离 　　} 　　}); 　　}//clientWidth处理兼容性 　　函数getClient () { 　　返回{ 　　宽度:窗口。innerWidth | | document.documentElement。clientWidth | | document.body.clientWidth, 　　高度:窗口。innerHeight | | document.documentElement。clientHeight | | document.body.clientHeight 　　} 　　}//页面尺寸改变时实时触发 　　窗口。onresize=function () {//重新定义瀑布流 　　瀑布(); 　　}；//初始化 　　窗口。onload=function () {//实现瀑布流 　　瀑布(); 　　}>

<>强效果如下
,

怎么实现瀑布流布局

<强>二、列多行布局实现瀑布流

<强>思路分析:

列实现瀑布流主要依赖两个属性。
一个是column-count属性,是分为多少列。
一个是纵队间隔属性,是设置列与列之间的距离。

<强>代码实现:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　,,,& lt; style> 　　,,,,,,,.box  { 　　,,,,,,,,,,,保证金:,10 px; 　　,,,,,,,,,,,column-count:, 3; 　　,,,,,,,,,,,纵队间隔:,10 px; 　　,,,,,,,} 　　,,,,,,,.item  { 　　,,,,,,,,,,,margin-bottom:, 10 px; 　　,,,,,,,} 　　,,,,,,,.item  img { 　　,,,,,,,,,,,宽度:,100%; 　　,,,,,,,,,,,身高:100%; 　　,,,,,,,} 　　,,,& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div 类=癰ox"祝辞 　　,,,& lt; div 类=癷tem"比; 　　,,,,,,,& lt; https://www.yisu.com/zixun/img , src=" banner.jpg " alt="/> 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么实现瀑布流布的局