[web效果实现－1]瀑布流实现

最新推荐文章于 2024-06-17 01:43:11 发布

tonyhzw

最新推荐文章于 2024-06-17 01:43:11 发布

阅读量2.5k

点赞数 2

分类专栏： web开发文章标签：瀑布流

本文链接：https://blog.csdn.net/datou0529/article/details/80502963

版权

开发时基本都是用现成的框架和开发好的插件，很少现写现用。最近感觉手写技法生疏了，遂准备实现几个常用的前端插件。首先，瀑布流。

瀑布流：渲染若干图片，其中图片宽度相同，高度不等。

写的时候，本想找一个例子，却没找到一个例子，淘宝、蘑菇街等渲染基本规整的方块。这里找了网上的插件效果图如下：
示例1

1 不考虑使每列均匀高度

所有图片无论多高，拿到一个就加入渲染队列，即下一个若渲染就渲染当前图片，不考虑高度对图片的影响。
缺点：会造成尾部参差不齐的问题

1.1 不考虑鼠标滑动问题，仅每次滑动时生成

瀑布流思路：除第一行外，其余都是找到当前每一列的最小的高度，将图片加入。

大致代码如下：

<!doctype>
<html>
<head>
<style>
.box{
  margin:0 auto;
  position: relative;
  width: 630px;
}
.img{
  position: absolute;
  width:200px;
  background-color: red;
  margin-right:10px;
  margin-bottom:10px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script text="text/javascript">
var x=[0,210,420],y=[0,0,0],min=0,minIndex=0;
var box = document.getElementsByClassName('box')[0];
function getMinIndex(min){
    
  var minIndex=0
  y.forEach(function(val,index,arr){

最低0.47元/天解锁文章

tonyhzw

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[web效果实现－1]瀑布流实现

开发时基本都是用现成的框架和开发好的插件，很少现写现用。最近感觉手写技法生疏了，遂准备实现几个常用的前端插件。首先，瀑布流。瀑布流：渲染若干图片，其中图片宽度相同，高度不等。写的时候，本想找一个例子，却没找到一个例子，淘宝、蘑菇街等渲染基本规整的方块。这里找了网上的插件效果图如下：不考虑使每列均匀高度不考虑鼠标滑动问题，仅每次滑动时生成瀑布流思路：除第一...
复制链接

扫一扫