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

由作者 王金阁不知名博主,曾网名:挨踢红领巾,现网名:Aduang 发布于

好了 昨天在论坛看到有人发布图片列表的插件。原帖找不到了。
这个插件在JS计算的时候由于CSS样式写定位问题照成所有东西都挤在一起看起来像乱了一样。JS计算有点慢。因为要等HTML和css加在之后在执行JS。
所以我在昨天晚上花了一点时间给改进了一下,在加载的时候首页不会看起来像样式乱了一样。
我附上几个修改前和修改后的图片给参考。
lr_lbzq

如果安装上面的版本有错误请使用下面的这个修改过的。使用的时候 解压过后把 _2 删除不删除会有找不到文件的错误提示,这个是我为了不重复自己加的。

lr_lbzq_2

这个图片列表修改了哪里我都一一列出来一下。

首先CSS  定位方式删除了  加了一个CSS3动画 看起来更舒服
CSS posion 给放到JS里了

img { border:none; }
.wrapper { width:100%;}
#con1_1 { position:relative;margin-left: auto;margin-right: auto;width: 842px; }
#con1_1 .product_list {left:0px; top:0px; margin:5px; background:#fff; border-radius: 5px;transition: all 0.5s;overflow: hidden;float:left;}
.product_list img { width:200px;}
.product_list p { padding:5px 0px; font-size:12px; text-align:center; color:#333;  white-space:normal; width:200px;}

JS 我把 鼠标经过效果删除了,因为鼠标进过效果可以用CSS来写,不用麻烦 JS了。

/*
原理:1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
     3.计算高度值最小的值是哪个li
     4.把接下来的li放到那个li的下面
*/
var margin = 10;//设置间距
var li=$(".product_list");//区块名称
var    li_W = li[0].offsetWidth+margin;//取区块的实际宽度
function liuxiaofan(){
    var h=[];//记录区块高度的数组
    var n = 960/li_W|0;
    for(var i = 0;i < li.length;i++) {
        li_H = li[i].offsetHeight;//获取每个li的高度
        if(i < n) {//n是一行最多的li,所以小于n就是第一行了
            max_H =Math.max.apply(null,h);
            h[i]=li_H;//把每个li放到数组里面
            li.eq(i).css("top",0);//第一行的Li的top值为0
            li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
            }
        else{
            min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个
            minKey = getarraykey(h, min_H);//最小的值对应的指针
            h[minKey] += li_H+margin ;//加上新高度后更新高度值
            li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
            li.eq(i).css("left",minKey * li_W);    //第i个li的左坐标就是i*li的宽度
        }
      //  $("p").eq(i).text("高度:"+li_H);//把区块高度值写入对应的区块H2标题里面
    }
    max =Math.max.apply(null,h) ;
    $("#con1_1").css("height",max+20);
	$(".product_list").css("position","absolute");
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload,因为图片不加载完就不知道高度值*/
window.onload = function() {liuxiaofan();};
window.onresize = function() {liuxiaofan();};

插件的样式和Jquery文件从<body>里转移到<head>里了,在install.php文件了加了两端代码。

plugin_install_before('./pc/view/header.inc.htm','</head>','<script src="xiunoui/jquery-1.11.1.js"></script>');
plugin_install_before('./pc/view/header.inc.htm','</head>','<link rel="stylesheet" href="plugin/lr_lbzq/style.css" media="screen" />');

还有一个地方就是 首页问题,装了插件之后首页调用的index文件变成了forum.htm。这样就把首页的筛选按钮就不能用了。
如果又创建了一个index文件。在install.php里又加了这么一段。

plugin_install_after('./pc/view/index.htm', '<?php include "./pc/view/header.inc.htm"; ?>', file_get_contents('./plugin/lr_lbzq/crd1.htm'));
plugin_install_after('./pc/view/index.htm', '<? include "./pc/view/header.inc.htm"; ?>', file_get_contents('./plugin/lr_lbzq/crd1.htm'));

plugin_install_before('./pc/view/index.htm','<?php if(forum_is_mod($fid, $gid, $uid)) { ?>','<?php }//pbl?>');
plugin_install_before('./pc/view/index.htm','<? if(forum_is_mod($fid, $gid, $uid)) { ?>','<?php }//pbl?>');

好了就修改了这么多。 大功告成。

可以浏览我的地址 体验一下 。经过以为匿名朋友的建议我把地址改成了 http://dy.nnbbxx.net

 

附上一下 改进前和改进后的图片对比。

xiuno bbs 图片列表修改前效果

xiuno bbs 图片列表修改前效果

xiuno bbs 图片列表修改后效果

xiuno bbs 图片列表修改后效果

xiuno bbs 图片列表修改后效果

xiuno bbs 图片列表修改后效果

Tags: |
原创申明: 本站原创转载请保留原文地址

本文地址:https://www.nnbbxx.net/post-5344.html
版权申明:本站原创内容版权遵循 CC-BY-NC-SA 协议规定。转载请标明出处。

Xiuno BBS 图片列表改进版打包分享 lr_lbzq.7z》有2个想法

发表评论

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