angular2+实现google photos效果

最新推荐文章于 2020-04-22 14:29:26 发布

原创最新推荐文章于 2020-04-22 14:29:26 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2 #angular4 #angular6 #css #photos

angular 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用Angular实现图片响应式布局的方法。通过后台获取图片数据并动态调整每张图片的宽度、高度及填充比例，使图片能够适应不同屏幕尺寸，提升用户体验。布局采用Flexbox实现，并结合Angular的*ngFor指令进行图片列表的动态渲染。

ts:

this.service.postData('/site_cnt/get_pictures', data).subscribe({
next: res => {
this.imgList = res.result.data;
for (const img of this.imgList) {
img['flexGrow'] = img.info.width * 200 / img.info.height;
img['width'] = img['flexGrow'] + 'px';
img['bottom'] = img.info.height / img.info.width * 100 + '%';
}
this.pageInfo = res.result.pageinfo;
}
});

html:

<section class="img_section">
<div class="img_div" *ngFor="let img of imgList" [ngStyle]="{'width': img.width,'flex-grow': img.flexGrow}" (click)="handlePreview(img.url, img.title)">
<i class="img_i" [ngStyle]="{'padding-bottom': img.bottom}"></i>
<img class="img_img" src="{{siteinfo.ucs + img.url}}" [title]="img.title">
</div>
</section>

css:

.img_section {
display: flex;
flex-wrap: wrap;
}
.img_section::after {
content: '';
flex-grow: 999999999;
}
.img_div {
margin: 2px;
background-color: violet;
position: relative;
cursor: pointer;
}
.img_i{
display: block;
}
.img_img {
position: absolute;
top: 0;
width: 100%;
vertical-align: bottom;
}