美文网首页
瀑布流布局

瀑布流布局

作者: 郑宋君 | 来源:发表于2018-11-21 13:56 被阅读0次

瀑布流布局是一种比较流行的网站页面布局方式,比如受淘宝首页猜你喜欢模块等很多大型网站的pc端和移动端都大量使用的一个技术,它也被称为瀑布流式布局
首先我们看几个关于瀑布流的布局效果!

1.png 2.jpg

从这个两个图可以看出来瀑布流效果是等宽元素一次摆列,后面的元素以此添加到指定位置,布局效果很随机不固定。

那么上面说的指定位置,什么是指定位置呢,也就是说,当等宽的元素排列的时候,后面添加的元素要放在所有列高度中最短的那一列,以此类推达到瀑布流布局的效果


suanfa.png

结合瀑布流布局的思想,我们想写出代码来需要完成几个步骤

  1. 首先开始书写css中就要固定好排列的每个元素的宽度
  2. 根据宽度得到需要多少列
    2-1. 初始化一个数组存入每一列的高度
  3. 把后面的元素拆入到一列中最短的高度中
    3-1.每次添加新的数组中按序排列最短的那一项
    3-2.插入后需要修改插入列的高度

html代码

<style>
*{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%
        }

        .waterfall {
            width: 90%;
            margin: 0 auto;
            position: relative;
        }
        img{
            position: absolute;
            margin: 10px;
        }
</style>
<div class="waterfall">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210"> 
            </div>

jquery代码

//一列放多少个
var colNum
//新建数组存储每列高度
var colHeightArray = []
//获取图片的宽度
var imgWidth = $('.waterfall img').outerWidth(true)
//列数值
colNum = Math.floor(  $('.waterfall').width()/imgWidth )
for( var i = 0 ; i < colNum ; i++ ){
  colHeightArray[i] = 0
}


$('.waterfall img').on('load',function(){
      //初始化数组最小值为索引为0的值
      var minValue = colHeightArray[0]
      //初始化数组最小值为索引
      var minIndex =  0
      for(var i = 0 ; i < colNum ; i++ ){
            if(colHeightArray[i] < minValue){
                 minValue = colHeightArray[i] 
                 minIndex = i
           }
      }
                   
     $(this).css({
         left:minIndex * imgWidth,
         top:minValue
      })

     colHeightArray[minIndex] += $(this).outerHeight(true);
     console.log(colHeightArray[minIndex])
 })

相关文章

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

  • 瀑布流

    1、什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚...

  • 瀑布流的三种实现

    先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流? 瀑布流,又称瀑布流式布局。 这种...

网友评论

      本文标题:瀑布流布局

      本文链接:https://www.haomeiwen.com/subject/orntqqtx.html