不依赖任何框架，H5首页瀑布流实现竟如此简单！

怼烎@ 2023-01-09 03:40 15阅读 0赞

注意：此文章为纯JS实现效果不依赖任何框架

为实现如下H5瀑布流显示效果

![在这里插入图片描述][20210120175737181.png]  
html:

<div class="productcontent" style="padding-bottom: 70px;">    
    	
    	 	<div onclick="window.location='productdetails.html'" class="item" >
    	 		   <div class="item-img">
    	 		   	<img src="img/productdetail1.jpg" >
    	 		   </div>
    	 	       <div class="item-content"> 
    	 	          小饼干特卖啦超级好吃快...
    	 	       </div>
    	 		   <div class="item-tag">
    	 		   	  <li>急速退款</li>
    	 			  <li>假一罚三</li>
    	 		   </div>
    	 		   <div class="item-price">
    	 		   	   ¥ 1999
    	 		   </div>
    	 	    </div>
    	 	</div>

css:

.productcontent{  
    								     padding-bottom: 70px;     
    									width: 100%;
    									position:relative;
    								 }   
    							 	.item-content{ 
    							 	    display: flex;
    							 	    flex-direction: column;
    							 	    justify-content: center;  
    							 	    padding: 5px;
    							 	    height: 14px;
    							 	    font-size: 14px; 
    									font-weight: 400;
    							 	    box-sizing: border-box;
    									margin-top: 5px;  
    							 	}   
    								 .item-img img{  
    									     width:100%; 
    								 }
    							 
    							  
    								 .item {  
    									   position: absolute;  
    									width: calc(50% - 8px); 
    									margin-left: 12px;
    									
    									 border: none; 
    									 background-color: white;  
    								 }   
    								 .item-tag{ 
    									 padding: 5px;
    									 color: #686868;
    									 font-size: 12px;
    								 }
    								 .item-tag li{ 
    									 float: left;
    									 list-style: none;
    									 margin-right: 10px; 
    								 }
    								 
    					.item-price{  
    						color: #db4f47;
    						margin-top: 15px;
    						margin-left: 5px;
    						font-size: 16px;
    					}

js:

function waterFall() { 
    	        // 1 确定图片的宽度 - 滚动条宽度
    	        var pageWidth = getClient().width;
    	        var columns = 2; //2列
    	        var itemWidth = parseInt(pageWidth/columns)-16; //得到item的宽度
    	        $(".item").width(itemWidth); //设置到item的宽度
    	        var arr = [];
    	        $(".productcontent .item").each(function(i){ 
    	            var height = $(this).find("img").height();
    	            if (i < columns) { 
    	                // 2 第一行按序布局
    	                $(this).css({ 
    	                    top:0, 
    	                    left:(itemWidth) * i+8*i,
    	                });
    	                //将行高push到数组
    	                arr.push(height);
    	            } else { 
    	                // 其他行
    	                // 3 找到数组中最小高度 和 它的索引
    	                var minHeight = arr[0];
    	                var index = 0;
    	                for (var j = 0; j < arr.length; j++) { 
    	                    if (minHeight > arr[j]) { 
    	                        minHeight = arr[j];
    	                        index = j;
    	                    }
    	                }
    	                // 4 设置下一行的第一个盒子位置
    	                // top值就是最小列的高度
    	                $(this).css({ 
    	                    top:arr[index]+72,//设置30的距离
    	                    left:$(".productcontent .item").eq(index).css("left")
    						
    	                });
    	 
    	                // 5 修改最小列的高度
    	                // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
    	                arr[index] = arr[index] + height+72;//设置30的距离
    	            }
    	        });
    	    }
    	    //clientWidth 处理兼容性
    	    function getClient() { 
    	        return { 
    	            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    	            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    	        }
    	    }
    	    // 页面尺寸改变时实时触发
    	    window.onresize = function() { 
    	        //重新定义瀑布流
    	        waterFall();
    	    };
    	    //初始化
    	    window.onload = function(){ 
    	        //实现瀑布流
    	        waterFall();
    	    }

[20210120175737181.png]: /images/20221119/5082f26edb85410bb1ed33cbf1c047d9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关一直想不明白的synchronized锁竟如此简单！

线程问题线程出现问题的根本原因是因为线程上下文切换，导致线程里的指令没有执行完就切换执行其它线程了，举例 > ★ > > t1和t2线程分别并行执行5000次+

爱被打了一巴掌/ 2023年09月28日 16:15/ 0 赞/ 14 阅读

相关 CSS超简单实现瀑布流

摘要：其实现在瀑布流的应用很是广泛，没有什么指示体验不错，这里我们就使用最简单的来使用。主要的就两个，一个是控制父类，一个控制包裹住图片的类 <!DOCTYP

左手的ㄟ右手/ 2023年06月25日 07:54/ 0 赞/ 28 阅读

相关 H5、小程序瀑布流布局

一：需求分析页面主要分成两列，每个条目的高度不固定，条目主要由封面图+标题+头像+发布者昵称组成多列排列要求，第一条在左侧，第二条在右侧，后续的根据左右两

绝地灬酷狼/ 2023年01月23日 14:47/ 0 赞/ 19 阅读

相关不依赖任何框架，H5首页瀑布流实现竟如此简单！

注意：此文章为纯JS实现效果不依赖任何框架为实现如下H5瀑布流显示效果 ![在这里插入图片描述][20210120175737181.png] html:

怼烎@/ 2023年01月09日 03:40/ 0 赞/ 16 阅读

相关 C语言实现MD5加密，竟如此简单！

![ed4e78e707539b096cd1052160b299ca.png][] 一、摘要算法摘要算法又称哈希算法。它表示输入任意长度的数据，输出固定长度

刺骨的言语ヽ痛彻心扉/ 2022年11月07日 13:27/ 0 赞/ 185 阅读

相关 ajax瀑布流分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

r囧r小猫/ 2022年07月16日 07:10/ 0 赞/ 198 阅读

相关简单图片瀑布流

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

àì夳堔傛蜴生んèń/ 2022年06月09日 13:24/ 0 赞/ 291 阅读

相关 iOS GZWaterfall任何形式的瀑布流

概述使用UICollectionView可以布局各种各样的瀑布流，下面我写了几种不同布局的瀑布流样式详细代码下载：[http://www.demodash

﹏ヽ暗。殇╰゛Y/ 2022年05月31日 11:17/ 0 赞/ 150 阅读

相关 js简单瀑布流实现

什么是瀑布流瀑布流其实就是一种布局方式，比如说有很多模块，这些模块大小不一，怎样才能把这些模块相对漂亮的排列到一起？瀑布流就可以很好地解决这个问题。首先把这

柔情只为你懂/ 2022年05月10日 00:20/ 0 赞/ 314 阅读

相关织梦首页列表页,ajax加载更多,瀑布流,首页多栏目切换

效果图 ![Center][] 加载更多按钮 ![Center 1][] 2017年1月.对以下代码做了优化. 更智能可以点击查看 [http://blog.c

太过爱你忘了你带给我的痛/ 2021年09月25日 21:28/ 0 赞/ 307 阅读