1、上图 
2、上代码
<div class="base-wrap word-break" style="padding: 40px 0 100px;">
<div class="rel index-all">
<aside id="top-bankuai-box" class="bg-fff top-bankuai float-top" style="display: none;">
<div class="ui-scrollertypeTop bg-fff clearfix" style="display: none;">
<ul class="index-heading-scrol f-14rem clearfix" style="min-width: 120%; width: 940px; display:none; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 480.189ms; transform: translate(-132px, 0px) translateZ(0px);"></ul>
</div>
</aside>
<!--文章 Start-->
<div id="art-content">
<script type="text/juicer" id="TemplateArtOne">
<div style="margin-bottom: 10px;background-color:white;" id="topic-item-${id}">
<div class="bg-fff index-post-all rel" id="conart-${id}">
<!--帖主头像昵称时间浏览-->
<ul class="clearfix" style="padding: 10px 10px 0;">
<li style="position: relative;float: left;">
<span class="dynamic-head">
<a href="../user_center/other_user_index.html?uid=${user.id}">
{#if user.sex=='1'}
<img src="${user.headImg}" οnerrοr="javascript: this.src = 'http://j.vzan.cc/fcontent/vzan/images/girl_bp.jpg'">
{#/if}
{#if user.sex=='0'}
<img src="${user.headImg}" οnerrοr="javascript: this.src = 'http://j.vzan.cc/fcontent/vzan/images/boy_bp.jpg'">
{#/if}
</a>
</span>
{#if user.vipAuth ==1}
<i class="icon-dynamic-vip"></i>
{#/if}
{#if user.phoneAuth ==1}
<i class="icon-index-dynamic-shangshouye"></i>
{#/if}
</li>
<li style="padding-left: 10px;overflow: hidden;height:40px;">
<div class="f-14rem rel" style="padding-right:15px;height:20px;margin-top:1px;">
<p class="f-14rem index-icon-infor clearfix">
<span class="dynamic-poster-name"> ${user.nickname} </span>
{#if user!=null}
{#if user.sex == '0'}
<i class="icon-circle-nv"></i>
{#/if}
{#if user.sex == '1'}
<i class="icon-circle-nan"></i>
{#/if}
{#if user.phoneAuth == 1}
<i class="icon-circle-tel"></i>
{#/if}
{#if user.videoAuth == 1 }
<i class="icon-circle-photo"></i>
{#/if}
{#/if}
{#if distance > 0}
<span style="color:#858585;"> ${distance} km</span>
{#/if}
</p>
<!-- data-cphref="${ComplainAddress}"--->
<a style="cursor:pointer;" href="javascript:;" data-setfrom="1"
class="abs jiantouzhankai" data-artid="${id}" data-cphref="">
</a>
</div>
<label class="f-11rem c858 clearfix" style="display: block;margin-top:3px;">
<span>${createDate}</span>
<span>浏览 ${click}</span>
{#if false}
<span>${AddressText}</span>
{#/if}
</label>
</li>
</ul>
<!--帖子正文内容-->
<ul style="padding:10px 10px;">
{#if IsGuerdon==40||IsGuerdon==5}
<!--海选投票-->
<!--普通投票-->
{#else}
{#if content!=''}
<li class="clearfix f-15rem word-break" style="color: black;line-height: 1.35;margin-bottom: 10px;">
{#if content!=''&& content!=null}
<div style="display:inline;" id="article-default-${id}" class="dynamic-content-f">
<a href="details.html?circleId=${id}">
$${content}
</a>
{#if quanwen!='' && quanwen!=null}
<a class="dynamic-all-f" href="details.html?circleId=${id}">全文</a>
{#/if}
</div>
{#/if}
</li>
{#/if}
{#if friendCircleImgss!=null}
{#if friendCircleImgss.length>0}
{#if friendCircleImgss.length>1}
<!--多张照片-->
<li class="index-more-pic" style="margin-bottom:10px;">
<ul class="clearfix temp-imagebox">
{#each friendCircleImgss as img,index}
{#if index==0||index==2}
<li href="${img.relativePath}" class="fl swipebox" style="width: 32%;" >
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="width:100%;" />
</li>
{#else if index==4||index==7}
<li href="${img.relativePath}" class="fl swipebox" style="width: 32%;margin: 2% 2% 0;" >
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="width:100%;" />
</li>
{#else if index==3||index==5||index==6||index==8}
<li href="${img.relativePath}" class="fl swipebox" style="width: 32%;margin-top: 2%;" >
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="width:100%;" />
</li>
{#else if index==1}
<li href="${img.relativePath}" class="fl swipebox" style="width: 32%;margin: 0 2%" >
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="width:100%;" />
</li>
{#else}
<li href="${img.relativePath}" class="fl swipebox" style="width: 32%;margin: 0 2%;display:none;" >
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="width:100%;" />
</li>
{#/if}
{#/each}
</ul>
</li>
{#else}
<!--1张照片-->
<li href="${img.relativePath}" class="temp-imagebox swipebox" style="margin-bottom:8px;" >
{#each friendCircleImgss as img,index}
<img src="${img.relativePath}" fullsrc="${img.relativePath}" style="max-height:200px;max-width:100%;" />
{#/each}
</li>
{#/if}
{#/if}
{#/if}
<!--赏转评赞-->
<li class="c858 clearfix f-12rem index-icon-bt" id="aciton-item-${id}" style="text-align: center;">
{#if zanUser}
<span class="fr" style="width:25%;">
<i class="zaned"></i>
<em style="color:#5a85ce;">赞 ${praise}</em>
</span>
{#else}
<span style="width:25%;cursor:pointer;" id='replybtn-1zan${id}'
class="fr temp-zan-btn" data-itemid="${id}" data-typeid="1">
<i class="icon-zan"></i>
<em>赞<em class="totalnum">{#if praise!= 0} ${praise}{#/if}</em></em>
</span>
{#/if}
{#if !IsLockComment}
<span class="fr temp-reply-btn" style="width:25%;cursor:pointer;"
id="replybtn-${id}" nickname="" pComtId="0" artId="${id}" duid="0"
floorId="0" data-artfrom="1">
<i class="icon-ping"></i>
<em>评{#if commentNum!=0} ${commentNum}{#/if}</em>
</span>
{#/if}
<span class="fr" style="width:25%;cursor:pointer;">
<a class="c858" href="../user_center/G-shopping-gift.html?uid=${user.id}">
<i class="icon-present"></i>
<em>送礼</em>
</a>
</span>
<span class="fr" style="width: 25%;">
<a class="c858 goChat" href="../im/chat/chat.html?uid=${user.id}" style="cursor:pointer;" duid="${user.id}">
<i class="icon-chat"></i>
<em>私聊</em>
</a>
</span>
</li>
{#if friendCircleZans!=null }
{#if friendCircleZans.length>0}
<li class="clearfix Re" id="zan-nickname-${id}">
<ul class="praise">
<li>
<i></i>
<div class="flex">
<span style="overflow: hidden;">
{#each friendCircleZans as puser,index}
{#if puser.type==1 }
<a href="javascript:;">${puser.cNickName}</a>{#if index!=(friendCircleZans.length-1)}、{#/if}
{#/if}
{#/each}
</span> 等<em class="totalnum">${praise}</em>人
</div>
</li>
</ul>
</li>
{#/if}
{#/if}
</ul>
{#if friendCircleZanComments!=null}
{#if friendCircleZanComments.length>0}
<span class="dynamic-linesplit"></span>
<ul class="dynamic-pl-ul">
{#each friendCircleZanComments as comment,index}
<li id="comms_${comment.id}" class="d-flex index-pl-li rel">
<div style="width:36px;overflow:hidden;">
<span class="dynamic-pl-head">
<a href="javascript:;">
<img src="${comment.cHeadimgurl}" /></a>
</span>
</div>
<ul class="flex temp-comment-menu" style="cursor:pointer;" data-commentid="${comment.id}"
data-setfrom="1" data-circleid="${id}">
<li class="clearfix" id="comment-state-${comment.id}">
<label class="fl wzsl dynamic-pl-name">${comment.cNickName}</label>
<span class="fr f-11rem dynamic-pl-time">${comment.createDate}</span>
</li>
{#if comment.contentHtml!=""}
<li class="clearfix word-break" style="line-height:140%;margin-top:1px;">
{#if comment.contentHtml!=""}
<p class="dynamic-pl-content">
{#if comment.parentId!=0}
回复 <a style="color: #5a85ce;" href="javascript:;">${comment.dNickName}</a>:
{#/if}
$${comment.contentHtml}
</p>
{#/if}
</li>
{#if index<2}
<span class="dynamic-linecontent"></span>
{#/if}
{#/if}
</ul>
</li>
{#/each}
</ul>
{#/if}
{#/if}
</div>
{#if commentNum > 5}
<span class="dynamic-linesplit"></span>
<div class="check-huifu rel" style="background: #fff;">
<a style="color: #5a85ce;" href="details.html?circleId=${id}">查看全部<em>${commentNum}</em>条回复</a>
</div>
{#/if}
{#/if}
</div>
</script>
</div>
<div id="m4" class="c858" style="margin: 10px 0;text-align: center;display:none;">网络比较慢，请重新尝试...</div>
<div id="m2" class="c858" style="margin: 10px 0;text-align: center;display:none;">
<img src="http://i.pengxun.cn/content/images/loading.gif" alt="" />正在加载...
</div>
<div id="m3" class="c858" style="margin: 10px 0;text-align: center;display:none;">已加载全部数据</div>
<!--文章 End-->
</div>
<div class="weui_mask" style="display:none;"></div>
</div>
4、演示网： http://yuecao.cc:8088/jiaoyou/circle_friends/index.html
5、不懂的联系 丘丘 ： 823627970
5395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
