牛牛逼逼叉叉
菜单

图片列表改进版打包分享 JS瀑布流插件替换提高JS速度

2016年08月01日,分类《网站建设》,作者:
博客捐助

Xiuno BBS 图片列表改进版打包分享 lr_lbzq.7z

上面是原帖地址   昨天发的幻灯片和图片列表改进版本

今天发一下JS瀑布流插件改进版

其实就是替换了一下瀑布流的插件  比原版的更快一点

一共要改两个文件,两个文件都是在/plugin/lr_lbzq/插件目录里

pinterest_grid

把上面这个插件上传到 xiunoui/ 目录里 然后改一下下面的代码

 

sorry , 忘了说明改哪两个文件。

改pbllb.htm和index.htm。index.htm 是我自己加的 如果你的没有就只改pbllb.htm就可以了。

<script type="text/javascript">
/*
原理:1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
     3.计算高度值最小的值是哪个li
     4.把接下来的li放到那个li的下面
*/
var margin = 10;//设置间距
var li=$(".product_list");//区块名称
    var h=[];//记录区块高度的数组
       /*此处省略N行代码*/
},function() {
$(this).css("background-color","#fff");
});
});
</script>

 

把原版上面的的JS替换成下面的这样  就完成了。

	<script src="xiunoui/pinterest_grid.js"></script>
	<script type="text/javascript">
		//瀑布流插件
		$(function(){
			$("#con1_1").pinterest_grid({
				no_columns: 4,
                padding_x: 10,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
			});
			$(".product_list").css("position","absolute");
		});
	</script>

最终效果 可浏览我的网站 dy.nnbbxx.net 我的已经改好了

这个幻灯片插件 就是 加了一个 timeout 给代码重复执行 原版的500MS 我改成2000MS 就是2秒执行一次。太快了列表项目多感觉会给浏览器添加压力。自己适当改一下吧,打开那个JS文件搜索2000改成你自己要改的数字就可以了



发表评论

电子邮件地址不会被公开。 必填项已用*标注

【上一篇】

Xiuno BBS 幻灯片插件3.0改进版打包分享 xn_slide.7z

【下一篇】

jQuery全屏滚动插件fullPage.js