纯手工打造漂亮的瀑布流五大插件一个都不少Bootstrap jQuery Masonry imagesLoaded Lightbox文档格式.docx

1、/twitter.github.io/bootstrap/2. jQuery：JavaScript框架，业界事实的标准。3. Masonry：制作瀑布流布局的JavaScript库。4. imagesLoad：监测图片是否加载完毕的JavaScript库。5. Lightbox：以弹框形式集中展示图片的JavaScript库。用Bootstrap打底首先为每个案例准备1-2张截图、案例名称以及案例作者，并创建简单的HTML布局如下：<div id=masonry class=container-fluidgt; &div class=thumbnailimgsimg src=./imag

2、es/2426.png /&/div&captiontitle简单OA管理系统&contentauthor by &a target=_blank href=为HTML元素定义简单的CSS样式：style& #masonry padding: 0; min-height: 450px; margin: 0 auto; #masonry .thumbnail width: 330px; 20px; border-width: 1px; -webkit-box-shadow: 0 6px 12px rgba（0, 0, 0, 0.175）; box-shadow: #masonry .thumbn

3、ail .imgs 10px; #masonry .thumbnail .imgs img margin-bottom: 5px; #masonry .thumbnail .caption background-color: #fff; padding-top: font-size: 13px; #masonry .thumbnail .caption .title font-weight: bold; 5px 0; text-align: left; #masonry .thumbnail .caption .author 11px; right;/style&此时的页面看起来如下图所示（源

4、代码在 index_1.html 中，文章最后会提供下载地址）。用Masonry+imagesLoaded创建瀑布流由于列表中包含图片，我们需要所有图片加载完毕后再调用Masonry的瀑布流布局，从而方式列表中的元素重叠在一起。为上述页面添加如下简单的JavaScript代码。script& $（function（） var masonryNode = $（#masonry）; masonryNode.imagesLoaded（function（） masonryNode.masonry（ itemSelector: .thumbnail, isFitWidth: true ）;/script

5、&此时页面显示效果如下图所示（源代码在 index_2.html 中，文章最后会提供下载地址）。手工创建随机序列和延迟加载效果如果图省事，上面就已经完成了全部的工作，页面已经创建出来了，瀑布流效果看起来还不错。不过程序员一定要精益求精，我们还要认真考虑如下两个问题：1. 目前有35个案例，每个案例有1-2张图片，要等这80几张图片全部加载完毕再生成瀑布流，需要的时间会很长；2. 由于这些案例都是平级的，我们不能手工引入顺序，所以需要随机显示。针对第一个问题，Masonry幸好有相应的 appended 方法，来在现有的瀑布流布局基础上添加新的元素，而不会影响已经存在的布局，其调用方法如下所示。

6、/ 首先将新元素添加到页面容器中masonryNode.append（newItems）;/ 等待新元素中的图片加载完毕 newItems.imagesLoaded（function（）/ 调用瀑布流布局的appended方法 masonryNode.masonry（appended, newItems）;）;那么在什么时间调用呢？上一篇文章纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！已经给出了相应的代码，在页面的滚动条滚动到页面底部时加入新的元素。$（window）.scroll（function（） if（$（document）

7、.height（） - $（window）.height（） - $（document）.scrollTop（） & 10） if（!imagesLoading） appendToMasonry（）;针对第二个问题，我们需要首先在页面上放置所有的案例并隐藏，然后通过JavaScript进行随机排序后，添加到页面中。随机排序使用了JavaScript数组的sort方法，如下所示。var ghostNode = $（#masonry_ghost）.find（）, i, ghostIndexArray = ;var ghostCount = ghostNode.length;for（i=0; i&g

8、hostCount; i+） ghostIndexArrayi = i; ghostIndexArray.sort（function（a, b） if（Math.random（） & 0.5） return a - b; else return b - a;JavaScript数组的sort方法接受一个函数，在函数内部决定两个需要比较对象的大小，我么使用Math.random来生成一个0-1的随机数来和0.5比较，从而使得两个需要比较的对象大小也是随机的。注：特别需要注意，由于隐藏在DIV中的图片还是会在页面打开时加载，我们需要先将 img 标签改为 inputtype=hidden 标签，并

9、在需要的时候还原成 img 标签。也即是将 & 替换为 &input type=hidden value=2426.png 。此时页面显示效果如下图所示（源代码在 index_3.html 中，文章最后会提供下载地址）。注意，此时页面中典型案例的顺序已经是随机的了，并且当页面滚动条靠近底部时会自动加载剩余的列表。Lightbox为页面增色由于瀑布流展示的图片比较小，最后我们还需要Lightbox为页面增色，调用代码非常简单，只需要修改 img 标签即可。将./images/1408.png修改为：a href=./images/large/1408.png data-lightbox=ligh

10、tbox_ title=Enterprise Solution （by James）/a&Lightbox和Bootstrap有点冲突，导致Lightbox不能正常显示弹出框中的图片，我们还需要在CSS中加入如下代码。.lightbox .lb-image max-width: none;使用Lightbox后的效果（源代码在 index.html 中，文章最后会提供下载地址）。此时，我们已经可以在全部的图片（是大图哦）中导航，效果很赞！最终效果快来体验一把：全部源代码下载下载地址：小结仔细想想，现在的Web前端工程师已经非常幸福了，你看IE6已死，IE7/8也蹦弹不了几天，还有那么多优秀的CSS、JavaScript框架供我们使用。而大部分时候我们的也没必要从头做起（做学习研究除外），站在巨人的肩膀上，省时省工，而且效果更好！喜欢这篇文章，请帮忙点击页面右下角的【推荐】按钮。