ios不规则式瀑布流是从哪个系统开始的

Posted 2023-04-05

参考技术A 瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，好像被喝茶了),还有淘宝的 “哇哦”/demos/publ/img/P_00$src"/> </div> `; 其实，精华就在上一部分，这个只是作为一个加载数据的手段，当然，你可以点击加载(手动触发)，或者其他的加载方法。 当然，怎么设置完全是取决于你的。 所以，随大流，依然是通过下滑滚动加载。 继续，找入口函数->dealScroll. 该函数执行的任务就是，通过isload函数,判断是否可以进行加载判断。 我们看一下isload函数，这个就是滚动加载的关键点. function isLoad() //是否可以进行加载 var scrollTop = document.documentElement.scrollTop document.body.scrollTop, wholeHeight = document.documentElement.clientHeight document.body.clientHeight, point = scrollTop + wholeHeight; //页面底部距离header的距离 var arr = $('.pin'); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; 通过计算得出，页面底部距视口的位置(工具条下部) 与 最后一个元素的绝对位置比较，如果 滑动距离超过，则启用加载。 yeah~ That's over. back to dealScroll 接下来就是看加载的部分了，这个部分其实也没什么说的，就是创建一个div节点，然后将他放到容器的最后，并且通过overLoad函数来处理该节点的位置。 另外在该函数的末尾，我设置了一个控制滑动速度的trick,通过对函数的节流，防止有时候，请求过慢，用户重复发送请求，造成资源浪费。 然后，这一部分也可以告一段落了。 4、响应式 最后一部分就是响应式了， 这部分，也超级简单，只要你封装性做的好，其实这一部分就是添加一个resize事件就over了。我们继续找入口函数。 var resize = (function() var flag; return function(fn) clearTimeout(flag); flag = setTimeout(function() //函数的节流,防止用户过度移动 fn(); console.log("ok") , 500); )(); 同样，这里使用到了函数节流的思想，要知道，作为一个程序员，永远不要以为 用户 干不出什么 傻事. 比如，没事的时候拖着浏览器窗口玩，放大，缩小，再放大... 其实，这事我经常干，因为没有女朋友，写代码写累了，就拖浏览器玩。 所以，考虑到我们单身狗的需求，使用函数节流是非常有必要的。 感兴趣的童鞋，可以参考我前面的文章，进行学习。 说明一下，这里的回调函数指的就是init函数，但是 需要对init做些改动。详见。 var update = function(ele) //当resize的时候，重新设置 ele.style.position = "initial"; //初始化时执行函数 var init = function() var pins = $(".pin"), col = columns(); arrHeight = []; //清空高度 setCenter(); //设置包裹容器的宽度 for (var i = 0, pin; pin = pins[i]; i++) if (i < col) //存储第一排的高度 arrHeight.push(pin.offsetHeight); update(pin); else overLoad(pin); //将元素的位置重排 上面需要加入update,对新的第一排元素进行更新。 然后就可以直接搬过来使用即可。 这就是绝对是布局的大部分内容了，关于javascript瀑布流另一种布局方式请参考下一篇文章《详解javascript实现瀑布流列式布局》。

不规则图片列表实现响应式布局

技术开发和实际运营总是有很大差别的，比如常见的图片列表，一般设计图上都是固定尺寸大小的，但是实际操作起来并没有太多人去ps修剪图片到知道的尺寸，大部分都是差不多比例的图片就直接上传了，为了解决不规则图片列表展示问题有相应的解决方案例如瀑布流，或者相册等，但是对于多终端响应式的网站这是非常头疼的。

一、常见的图片固定大小方式弊端

1. 固定图片宽高，图片变形

2. 响应式布局跨度不能太大，需要跨度小修改宽度频繁

3. 不利于左右间距控制等

二、两种解决方案

方案一：使用rem来书写响应式的宽高，宽高根据font-size的大小来实现动态改版宽度。

优点在于响应式布局非常方便，都是按照比例进行的缩放，弊端是在于如果图片不规则，那么图片变形是难免的。为了解决图片变形问题我们介绍一下方案二.

方案二：使用定位比例法

图片外层的盒子（div或者dt）定义如下样式：

---

height:0;   //高度设置为0
width:23%;    //使用百分比宽度和百分比边距
margin:0 1%;
position: relative;  //定位
padding-bottom:75%;  //使用padding来按照比例撑开div
overflow: hidden;    //溢出部分隐藏

这时候盒子内部的图片设置宽度百分百，高度自适应，定位在（0,0）点，图片会被外层盒子自动截取，因为外层的盒子padding和宽度都是百分比的，所以整个布局是百分比显示的。

---

position: absolute;    //定位在0,0位置，解决padding占高图片不在最顶端问题
left: 0;
top: 0;
width: 100%            //自适应高度，宽度百分比
height: auto;

优点如下：

1. 按照宽度的比高度的百分比来设置padding，可视区域按照比例缩放

2. 解决图片变形的困扰。

3. 一次布局多终端友好