您的位置: 首页 >>日志>>前端技术>详细内容

前端技术

SA瀑布流图片形式展示

来源:本站原创 发布时间:2020-07-01 14:31:36 浏览次数: 【字体:

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

html结构:

@Power.ArticleList("文章图片列表-无裁剪", new { Node = "***", Count= 12, Illustrated = true, TitleLength = 56, ShowDate= true, DateFormat ="yyyy-MM-dd", ShowNode= true , Sort="Priority,PublishTime"})

引入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))
     {
         @Model.Title
      }
      else
     {
      @Model.Title
      }

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

标签和js压缩包下载