您的位置:首页> 日志> 前端技术 正文
DTOP

SA瀑布流图片形式展示

liotc | 2020年07月01日 |

>>收藏本文 已有 0条评论

固定宽度内实现内容瀑布流,实现错落有致感,引入jaliswall.js

html结构:

<div class="pic-list-pbl">
  @Power.ArticleList("文章图片列表-无裁剪", new { Node = "***", Count= 12, Illustrated = true, TitleLength = 56, ShowDate= true, DateFormat ="yyyy-MM-dd", ShowNode= true , Sort="Priority,PublishTime"})
</div>
<script src="@Url.AppendVersion($"~/Content/{CurrentSite.Instance.Identifier}/Base/js/jaliswall.js")"></script>
<script>
    $(function(){
		$('.pic-list-pbl').jaliswall({ item: '.pic-li' });
	});
</script>

引入jaliswall.js后,会把标签读取的内容分割成N*wall-column列区块,分割的列(wall-column),在css中设置width值的百分比是指瀑布流分几列展示,比如25%,就是一共4列显示,如下图,需要其它列数效果,调整百分比很快即可实现,不需要考虑间距的占比,间距需要在wall-column 内单独起样式控制。

.pic-list-pbl .wall-column { width: 25%; float: left; }

 

系统文章图片列表有裁剪效果的,在这里不适用,需要原图无裁剪,才能更好的展示实际效果。这里把标签的图片裁剪参数去掉,然后重新命名,避免展示图片因裁剪出现模糊或比例不对问题,图片获取代码部分修改后如下。

@if (string.IsNullOrEmpty(Model.FeaturedImage))
     {
         <img alt="@Model.Title" src="~/Content/_Common/Base/img/nopic.gif" />
      }
      else
     {
      <img alt="@Model.Title" src="@Power.Url.GetContentUrl(Model.FeaturedImage)" />
      }

整体效果样式不多述,预览站点:https://design.gxau.edu.cn,通过以上几个步骤就可实现内容排序是横向1-2-3-4形式展示的瀑布流布局。

标签和js压缩包下载