医院网站建设意义,网站建设一般是用哪个软件,php公司网站,wordpress 原创主题用最清晰简洁的方法整合一个响应式相册效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架#xff0c;查看后表示很不错#xff0c;能满足需要http://fancyapps.com/fancybox/3/图片加载可能会太慢#xff0c;所以还需要一个图片延迟加载插件 Lazyload想使…用最清晰简洁的方法整合一个响应式相册效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架查看后表示很不错能满足需要http://fancyapps.com/fancybox/3/图片加载可能会太慢所以还需要一个图片延迟加载插件 Lazyload想使用瀑布流作为展示粗略了解了下便使用开源的MiniGrid原因是它很小巧也刚好满足需求(ps:它的文档让我看了很捉急,不完善的文档是个大坑)相册文件夹 按照Hexo官方给的建议 资源Asset代表 source 文件夹中除了文章以外的所有文件例如图片、CSS、JS 文件等。比方说如果你的Hexo项目中只有少量图片那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于  的方法访问它们。 对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。 post_asset_folder: true 然后就可以在文件夹source下新建一个相册文件夹Images,将照片放入这个文件夹 相册页面 我们需要一个相册页面以加载所有照片 --- title: 相册 noDate: true --- script srchttps://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js/script script srchttps://unpkg.com/minigrid3.1.1/dist/minigrid.min.js/scriptdiv classImageGrid/divscript src/js/photo.js/script 这里使用noDate来自定义一些HTML数据加载一些JS文件(minigrid在bootcss中还是1.*的版本只好使用它推荐的cdn了)其中photo.js是自定义的用来加载照片稍后提到。 现在我们就有一个相册页面了接下来的问题是怎么批量加载那些照片。 脚本 大家可以集思广益我是用的是一个教程中的脚本改的与其思路一致。 在博客主文件夹下新建tool.js use strict;const fs require(fs);const sizeOf require(image-size);const path ./source/Images;const outputfile ./source/Images/output.json;var dimensions;fs.readdir(path, function (err, files) {if (err) {return;}let arr [];(function iterator(index) {if (index files.length) {fs.writeFile(outputfile, JSON.stringify(arr, null, \t));return;}fs.stat(path / files[index], function (err, stats) {if (err) {return;}if (stats.isFile()) {dimensions sizeOf(path / files[index]);console.log(dimensions.width, dimensions.height);arr.push(dimensions.width . dimensions.height files[index]);}iterator(index 1);})}(0));}); 每次在相册中更新照片后都要在控制台node tool.js一下以便更新数据。 它会生成一个json文件带有每张照片的长宽及文件名。 需要它的宽高是因为我们需要它满足瀑布流样式。 output.json样式类似于 [3120.4160 发票.jpg,516.516 头像.jpg,402.180 录音.jpeg,720.758 截图1.jpg,720.978 截图2.jpg ] photo.js photo {page: 1,offset: 20,init: function () {var that this;$.getJSON(/photo/output.json, function (data) {that.render(that.page, data);//that.scroll(data);});},render: function (page, data) {var begin (page - 1) * this.offset;var end page * this.offset;if (begin data.length) return;var html, li ;for (var i begin; i end i data.length; i) {li div classcard div classImageInCard a data-fancyboxgallery href/Images/ data[i] img src/Images/ data[i] / /a /div div classTextInCarddata[i].split(.)[0]/div /div }$(.ImageGrid).append(li);$(.ImageGrid).lazyload();this.minigrid();},minigrid: function() {var grid new Minigrid({container: .ImageGrid,item: .card,gutter: 12});grid.mount();$(window).resize(function() {grid.mount();});}}photo.init(); js文件也可以放在Images文件夹下只需要将相册页面加载的script src/js/photo.js/script改成script src/Images/photo.js/script即可。 css 这个样式是我自己写的大家可以按照自己的想法自行更改 .ImageGrid {width: 100%;max-width: 1040px;margin: 0 auto;text-align: center;} .card {width:160px;height:260px;overflow: hidden;} .ImageInCard {height:185px} .ImageInCard img {height:100%;width: auto;padding: 0 0 0 0; } .TextInCard {height:75;background-color: #fff;} 自动构建 我是使用travis-ci自动构建的。用过以后表示很鸡肋 如果你也使用了这个的话在travis.yml中的script或者before_script,添加一句node tool.js,就可以将相册脚本也加入自动构建 script:- node tool.js- hexo g 转载于:https://www.cnblogs.com/fchange/p/8465144.html