Question

高分求助jquery如何实现下面图片里的效果

图片列表展示页，点击某个图片时展开隐藏的图片内容层，展开的内容层在当前点击图片的下面整行，同时不影响整个图片列表的正常排列显示
代码：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
......
</ul>
</div>

<div id="box">这里是显示的内容</div>

Answer 1

图片大小自适应要用到imgLiquid-min.js插件

效果图

demo>>http://jsfiddle.net/mDdKr/284/

html代码

<table>
    <tr class='small'>
        <td><img src='

        <td><img src='

        <td><img src='

        <td><img src='

    </tr>
    <tr class='small'>
        <td><img src='

        <td><img src='

        <td><img src='

        <td><img src='

    </tr>
    <tr class='small'>
        <td><img src='

        <td><img src='

        <td></td>
        <td></td>
    </tr>
</table>

js代码

$(document).ready(function() {
    $(".small td").imgLiquid();//自适应大小
    $(".small td").click(function () {
        $("td").removeClass("nowat");
        $(".big").remove();
        $(this).addClass("nowat");
        $(this).parent("tr").after('<tr class="big"><td colspan=4><img src="'+$(this).find("img").attr("src")+'" /></td></tr>');
    });
    $("body").on("click", ".big td", function () {
        $(this).parent("tr").remove();
    });
 });

css代码

table {
    margin: 0 auto;
    text-align: center;
    background-color: #000000;
    border-collapse: separate;
    border-spacing: 10px ;
}
tr.small {}
tr.small td {
    height: 65px;
    width: 65px;
    background-color: #008b47;
}
.nowat {
    border: solid 2px #ffffff;
}
tr.big {}
tr.big td {
background-color: #fff;
}

追问

代码：

......

这里是显示的内容

我的代码是这样的，请问怎么处理？

Answer 2

//思路是在当前图片行的最后元素后面，插入几行空的 li 占位，
//将下面的 li 挤下去,然后将 box 绝对定位到下一行，覆盖在空的 li 上面。

var config = {
    columnNumber : 0,
    liNumber :0,
    box ,
    insertHolder:function(){
        $("div ul li.li-holder").remove();
        var holder="";
        for(var i = 0 ; < columnNumber ;i++){
           holder += "<li class='li-holder'"></li>;
        }
    },
    init:function(num){
        this.columnNumber = num;
        this.liNumber = $("div ul li img").length;
        this.box = $("#box");
        this.insertHolder();
    },
}

config .init();

$("div ul li img").each(function(){function( i, v){

        var rowIndex = i % config.colunNumber ;//获取当前图片在行的位置，从 0 开始
    
        var appendIndex = columnNumber - rowIndex - 1 ; // 获取当前 li 距离本行最后一个 li的位置
        
        var rowLast = $(this).nextAll("li:eq(" + appendIndex + ")");//获取本行最后一个元素
        
        rowLast .append($("li.li-holder").show());
        //将占位的空白 li 移动到本行的末尾处
        
        config.box.show().css({left:0,top:rowLast.position().top});
       
    })
});

抱歉，纯粹是好久没写代码了，技痒。没调试，没试验，当个笑话看吧，呜哈哈啊哈哈哈哈哈。

Answer 3

代码基本没有现成的，思路可以提供给你：
1、建立横排div 3行
2、每行建立div 4个
3、第一行默认打开，高度为2行的高度，内容是：
<div class='row'>
<div class='imglink'></div>

<div class='show'>
<div class='sanjiao'></div>
</div>

</div>
row是一行标签，imglink是4个触发点，show是那行白色区域，把show的区域做好样式，例如：背景白、字体、颜色等，注意position要为relative，sanjiao是上三角（推荐用css3做）是绝对定位一个top的负值，在白框上方，left指定某个触发点
4、如果你的js熟练，可以将show里的格式做成js模版，通过点击不同imglink调用不同的内容进行替换，然后append到响应的row内
5、如果不熟练可以把12个show都做好，一个个在row里调试样式，当每个都做好后，就先打开第一个，以后就imglink点那个就隐藏当前显示的，显示点击的。

Answer 4

收取财富只是为了避免抄袭

使用之前请先引入jquery基本仓库

之前本来想用ul + li做的，但是试了一下返现很麻烦，所以这里用了table，不过我已经极力缩减html代码了

功能已经实现，只是做的比较小，你可以自己改大点，只需要修改css就好了

追问

谢谢，代码实现了基本效果，但还要求助大神，在js里如果不是直接引用内容，而是引用div层的id

追答

将源代码修改为

var text = $("#box").text();
$(this).append('<span class="arrow">◆</span>');
$('<tr class="box"><td colspan="4">'+ text +'</td></tr>').insertAfter($(this).parent());

追问

......

你好，这是一段测试文字

能不能不用table改用ul li来实现呢？

Answer 5

// html格式和你的一样
// 需要jquery
$(function () {
  $('li').click(function () {
    var $this = $(this);
    var parentEl = $(this).parent();
    
    $('.content', parentEl).remove();

    var index = $(this).index() + 1;
    var children = parentEl.children();
    var length = children.length;
    var rowCount = 4;
    var insertIndex = index + rowCount - index % rowCount;
    var content = '<li class="content">' + $('#box').html() + '</li>';
    if (insertIndex >= length) {
      parentEl.append(content);
    } else {
      $(content).insertBefore(children.eq(insertIndex));
    }
  });
});

 

// css
ul {
  width: 400px;
  margin: 0;
}

li {
  border: 10px solid black;
  width: 80px;
  height: 80px;
  overflow: hidden;
  float: left;
  list-style: none; 
}

.content {
  float: none;
  display: block;
  width: 380px;
  height: auto;
}

img {
  width: 80px;
  heigth: 80px;
}