网页编程网

www.youkud.com

当前位置：主页 >> 网页特效 >> 正文

jquery实现瀑布流思路

阅读：2877 输入：2020-05-15 11:23:05

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
   var img=$('.box');
   var imgWidth=img.width()//图片宽度，outerWidth
   var screenWidth=$(window).width();//窗口高度
   var cols=parseInt(screenWidth/imgWidth);
   var heightArr=[];
   $.each(img,function(index,item){
      var imgHeight=$(item).height();//每张图片高度
         if(index<cols){//是否第一行
            heightArr[index]=imgHeight;
         }else{
            //最小高度用...
            var minHeight=Math.min(...heightArr);
            //最小高度索引，用$.inArray()
            var minHeightIndex=$.inArray(minHeight,heightArr);
            //也可用findIndex()返回符合条件数组的第一个元素的位置
            //var minHeightIndex=
            $(item).css({
               position:'absolute',
               top:minHeight+'px',//最小高度
               left:minHeightIndex*imgWidth+'px'//高小高度索引*图片高度
            });
            heightArr[index]+=imgHeight;//更新最小高度的值
         }//if
      })
   })
</script>
</head>
<body>
<div class="box">
   <img src="new4/image/5.jpg" />
<img src="new4/image/1.jpg" />
<img src="new4/image/2.jpg" />
<img src="new4/image/3.jpg" />
<img src="new4/image/4.jpg" />

<img src="new4/image/6.jpg" />
</div>
</body>

上一篇：shell脚本四剑客find，grep，sed，awk
下一篇：python用selenium登录天眼查并查询数据

相关阅读: 利用jq设置图片等比例缩小; jQuery实现DIV层淡入淡出拖动特效的方法; 在js中怎样获得checkbox里选中的多个值

下载专区: 软件下载（提取码：mtag）

Tag

HTML工具: 进制间转换; 进制转换（带小数）; html代码运行

HTML工具: 字母翻转; 硬盘整数分区; html颜色代码

HTML工具: 除空格回车; 万年历; fojiao

HTML工具: 小游戏; 在线绘画; 更多

手机版
联系微信:jingqishens