javascript实现图片瀑布流

  瀑布流主要就是指数据按照瀑布方式自上而下加载,主要由于高度的不同造成的瀑布落差感(可以参考百度图片)。javascript实现图片瀑布流主要分三个步骤:
1.瀑布容器和图片属性设置(大小、边框、颜色、边距等)
2.图片加载方式
3.图片滚动加载

1.属性设置
html结构:


<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/2.jpg">
            </div>
        </div>
        //根据需要添加N个
        ......
        ......
    </div>
</body>

CSS样式:

/*图片采用统一宽度和原高度*/
.box_img img{ 
    width: 200px;
    height
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Hbuilder 中实现图片瀑布流,可以使用循环代码结合 CSS 样式来实现。具体步骤如下: 1. 在 HTML 文件中创建一个容器,用于存放瀑布流中的图片,如下所示: ``` <div class="waterfall-container"> <!-- 这里用循环代码动态生成图片 --> </div> ``` 2. 在 CSS 文件中设置容器的样式,包括宽度、边距等: ``` .waterfall-container { width: 100%; margin: 0 auto; } ``` 3. 在 JavaScript 文件中使用循环代码动态生成图片,并为图片设置样式,包括宽度、高度、边距等。具体代码如下: ``` // 图片数据,用于循环生成图片 var imgData = [ "image1.jpg", "image2.jpg", "image3.jpg", // ...更多图片地址 ]; // 循环生成图片 for (var i = 0; i < imgData.length; i++) { var imgSrc = imgData[i]; var img = document.createElement("img"); img.src = imgSrc; // 设置图片样式 img.style.width = "100%"; // 图片宽度 img.style.height = "auto"; // 图片高度自适应 img.style.margin = "10px"; // 图片边距 // 将图片添加到容器中 document.querySelector(".waterfall-container").appendChild(img); } ``` 4. 最后,为了实现瀑布流的效果,可以使用 CSS 的 column-count 属性,将容器中的图片分成多列。具体代码如下: ``` .waterfall-container { width: 100%; margin: 0 auto; column-count: 3; /* 将容器中的图片分成 3 列 */ column-gap: 20px; /* 列与列之间的间距 */ } ``` 以上就是使用循环代码在 Hbuilder 中实现图片瀑布流的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值