自己用jQuery写一个瀑布流

前言

这个月一直在忙工作。一直没有机会学习新的知识。前两天，突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。
首先，先考虑思路。所有的图片，全部采用相对父目录定位的方式。然后用jQuery来找出它应该排在什么位置。最终，达成瀑布流的效果。
想再多没用。开干。

构建html构架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>瀑布流jquery版本测试</title><link rel="stylesheet" href="style/style.css"><script src="js/jquery/jquery.js"></script><script src="js/FengWaterFall.beta2.js"></script>
</head>
<body>
<h1 class="tc cf">瀑布流jquery版本测试</h1>
<section id="waterfall"><ul class="piclist"><li><img src="data:image/1.jpg" alt=""><span>瀑布流测试1</span></li><li><img src="data:image/2.jpg" alt=""><span>瀑布流测试2</span></li><li><img src="data:image/3.jpg" alt=""><span>瀑布流测试3</span></li><li><img src="data:image/4.jpg" alt=""><span>瀑布流测试4</span></li><li><img src="data:image/5.jpg" alt=""><span>瀑布流测试5</span></li><li><img src="data:image/6.jpg" alt=""><span>瀑布流测试6</span></li><li><img src="data:image/7.jpg" alt=""><span>瀑布流测试7</span></li><li><img src="data:image/8.jpg" alt=""><span>瀑布流测试8</span></li><li><img src="data:image/9.jpg" alt=""><span>瀑布流测试9</span></li><li><img src="data:image/10.jpg" alt=""><span>瀑布流测试10</span></li><li><img src="data:image/1.jpg" alt=""><span>瀑布流测试1</span></li><li><img src="data:image/2.jpg" alt=""><span>瀑布流测试2</span></li><li><img src="data:image/3.jpg" alt=""><span>瀑布流测试3</span></li><li><img src="data:image/4.jpg" alt=""><span>瀑布流测试4</span></li><li><img src="data:image/5.jpg" alt=""><span>瀑布流测试5</span></li><li><img src="data:image/6.jpg" alt=""><span>瀑布流测试6</span></li><li><img src="data:image/7.jpg" alt=""><span>瀑布流测试7</span></li><li><img src="data:image/8.jpg" alt=""><span>瀑布流测试8</span></li><li><img src="data:image/9.jpg" alt=""><span>瀑布流测试9</span></li><li><img src="data:image/10.jpg" alt=""><span>瀑布流测试10</span></li></ul>
</section>
</body>
</html>

SCSS代码

@charset "UTF-8";
@import "reset.scss";.piclist {margin: auto;position: relative;li {width: 180px;padding: 10px;border-radius: 5px;box-shadow: 0 0 4px #ddd;position: absolute;}img {display: block;width: 180px;}span {display: block;text-align: center;height: 26px;overflow: hidden;line-height: 26px;}
}

关于 reser.scss 初始文件。其实里面没啥，只是清除了默认样式而已。大家有兴趣，可以看一下我之前写的博文：http://blog.csdn.net/fungleo/article/details/48027493
页面宽度设置为100%

$WinWitdh:100%;

jquery 实战第一回合

/*FengWaterFall.beta1.js这个版本基本实现了瀑布流的效果。但是其算法不是很优秀。当顺序操作到图片时，它不是找空白最大的一列，所以某些情况看上去会很怪。2015年10月15日 15:07:03
*/$(function(){var Obj = $("#waterfall"),Ul = Obj.children('ul'),Li = Ul.children('li');waterfall();$(window).resize(function(event) {waterfall();});function waterfall(){var WinW = $(window).width();var Blank = 20,                     // 每个图片之间的间隔留白LiW = 200+Blank,                // 一个图片距离上一个图片的宽度距离LiCol = parseInt(WinW/LiW),     // 计算在当前窗口下，有几列UlW = LiCol*LiW-Blank;          // 根据有几列，设定总的宽度（减掉最后一个留白）Ul.width(UlW);Li.each(function(i, e){var T = $(this),TCol = i%LiCol,             // 用求余数的方法获知当前图片为一行中的第几个TRow = parseInt(i/LiCol);   // 当前索引除以列数，并取整，得知为第几行/*取得位于当前图片上侧的图片元素获取这个元素本身的高度，和父元素顶部的距离，加上空格留白，得出当前图片距离顶部的距离。*/var PrevLi = Li.eq(i-LiCol),PrevLiSize = PrevLi.innerHeight()+PrevLi.position().top+Blank;TRow==0 ? Ttop = 0 : Ttop = PrevLiSize+'px';var Tleft = TCol*LiW+'px';T.css({top: Ttop,left: Tleft});});}
})

实现了第一个方法之后，通过预览效果，感觉算法不是很好。所以，开始勾勒第二版。

jquery 实战第二回合

/*FengWaterFall.beta2.js完美实现了瀑布流效果。其中使用的是for循环来查找索引。
*/$(function(){var Obj = $("#waterfall"),Ul = Obj.children('ul'),Li = Ul.children('li');waterfall();$(window).resize(function(event) {waterfall();});function waterfall(){var WinW = $(window).width();var Blank = 20,                     // 每个图片之间的间隔留白LiW = 200+Blank,                // 一个图片距离上一个图片的宽度距离LiCol = parseInt(WinW/LiW),     // 计算在当前窗口下，有几列UlW = LiCol*LiW-Blank;          // 根据有几列，设定总的宽度（减掉最后一个留白）Ul.width(UlW);var AllLi = [];                     // 建立一个空数组变量Li.each(function(index, e){var T = $(this);if (index<LiCol) {                      // 第一行的处理AllLi[index] = T.outerHeight();     // 给数组添加内容，为当前元素的高度值T.css({top: 0,left: LiW*index+'px'});} else{var MinH = Math.min.apply(null,AllLi);      // 找到数组中，最小的那个值（也就是留白最大的）// 通过 for 循环数组 找到最小的这个数字所在的索引值for (var i = 0; i < AllLi.length; i++) {if (AllLi[i] == MinH) {var MinI = i;};};var ThisH = T.outerHeight()+Blank;          // 自身的高度加上留白AllLi[MinI] = parseInt(MinH+ThisH);         // 将被占位的数组重新赋值T.css({top: MinH+Blank+'px',left: LiW*MinI+'px'});};});// console.log(AllLi)}
})

第二个方法的逻辑是完全正确了。实现效果也是完美的。
不过for循环比较怪。jquery嘛，应该用jquery的方法来实现。

jquery 实战第三回合

/*FengWaterFall.beta3.js完美实现了瀑布流效果。jquery的each方法循环数组。但是被迫用了全局变量。
*/$(function(){var Obj = $("#waterfall"),Ul = Obj.children('ul'),Li = Ul.children('li');waterfall();$(window).resize(function(event) {waterfall();});function waterfall(){var WinW = $(window).width();var Blank = 20,                     // 每个图片之间的间隔留白LiW = 200+Blank,                // 一个图片距离上一个图片的宽度距离LiCol = parseInt(WinW/LiW),     // 计算在当前窗口下，有几列UlW = LiCol*LiW-Blank;          // 根据有几列，设定总的宽度（减掉最后一个留白）Ul.width(UlW);var AllLi = [];                     // 建立一个空数组变量Li.each(function(index, e){var T = $(this);if (index<LiCol) {                      // 第一行的处理AllLi[index] = T.outerHeight();     // 给数组添加内容，为当前元素的高度值T.css({top: 0,left: LiW*index+'px'});} else{var MinH = Math.min.apply(null,AllLi);      // 找到数组中，最小的那个值（也就是留白最大的）// 通过each 循环数组的方式，找到索引$.each(AllLi,function(index,value){if (value == MinH) {MinI = index;       // 因为 var 局部变量不能被用到下面去，所以用了全局变量};});var ThisH = T.outerHeight()+Blank;          // 自身的高度加上留白AllLi[MinI] = parseInt(MinH+ThisH);         // 将被占位的数组重新赋值T.css({top: MinH+Blank+'px',left: LiW*MinI+'px'});};});// console.log(AllLi)}
})

总结

这时候，我去看了一下别人是怎么写的。结果发现整体思路如出一辙。但是其查找索引的用法比我用for或者each循环要简单可靠得多。不过我还没有弄懂到底是怎么运作的。所以，就不做搬运工了。

自己用jQuery写一个瀑布流相关推荐

JQuery实现照片瀑布流
JQuery实现照片瀑布流摘要:总所周知,百度搜图结果下拉会越来越多自动呈现,成为瀑布流.想要打造类似百度图片搜索的瀑布流不是困难的事情,通过javascript也能实现只是实现的比较麻烦,通过jq ...
用vue.js写的一个瀑布流的组件
很少写文章,很乱,,见谅. 我所见过的瀑布流都是固定的几列,然后每一列包含若干个元素(图文元素),每一列的总高度都差不多. 所以我这个组件的功能就很简单,可以设置列数量,然后只要再写一个渲染元素的方法 ...
原生 JS 实现一个瀑布流插件
更好的阅读体验,点击原文地址瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
通过用jQuery写一个页面，我学到了什么
概述前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...
Swift：用UICollectionView整一个瀑布流
本文的例子和Swift版本是基于Xcode7.2的.以后也许不知道什么时候会更新. 我们要干点啥用新浪微博的Open API做后端来实现我们要提到的功能.把新浪微博的内容,图片和文字展示在colle ...
用jquery写一个属于自己的音乐播放器
看到一个用css3实现的CD的动画,演示在这儿http://codepen.io/_kieran/pen/QNRmep 突然那我就想说给自己做一个音乐播放器吧,说做就做.演示在https://echo ...
jQuery写一个简单的弹幕墙
近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细代码下载:http://www.demodashi ...
用JQuery写一个斗地主发牌器
代码展示 CSS样式 <style>* {margin: 0;padding: 0;}/* body {background-color: aquamarine;} */div {widt ...
html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细
这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过.但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解. 由于无聊就自己动手去写,发现其实很简单,反而去参考别人的会把自己绕晕 ...

自己用jQuery写一个瀑布流

自己用jQuery写一个瀑布流

前言

构建html构架

SCSS代码

jquery 实战第一回合

jquery 实战第二回合

jquery 实战第三回合

总结

自己用jQuery写一个瀑布流相关推荐

最新文章

热门文章

自己用jQuery写一个瀑布流

自己用jQuery写一个瀑布流

前言

构建html构架

SCSS代码

jquery 实战 第一回合

jquery 实战 第二回合

jquery 实战 第三回合

总结

自己用jQuery写一个瀑布流相关推荐

最新文章

热门文章

jquery 实战第一回合

jquery 实战第二回合

jquery 实战第三回合