html - 寻找响应式画廊

Question

我正在寻找为我的摄影建立一个网站，该网站响应迅速且干净。在谷歌搜索几个小时后，我浏览了这个网站： nathanelson

我认为它绝对完美，但不幸的是，我不得不从托管服务提供商aPhotofolio购买托管包，但我已经从 Godaddy 购买了托管包。

所以我的问题是，有人知道我可以插入到普通 HTML 文档中的任何响应式照片库吗？

泽克

Answer 1

float:left布局是一个很好的响应式布局。像这样使用它：

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    margin: 0 10px 10px 0;
  	-webkit-animation: slide 1s forwards;
	-webkit-animation-delay: 1s;
	animation: slide 1s forwards;
	transform: translateX(-100%);
	width: 100px;
	height: 100px;
}

.wrap {
    display: inline-block;
}

@-webkit-keyframes slide {
  0% {
        background:rgba(0,0,0,0.5)
		transform: translateX(-100%)
	}
	
	100% {
        background:gray;
		transform: translateX(100%)
	}
}
@keyframes slide {
  0% {
        background:rgba(0,0,0,0.5)
		transform: translateX(-100%)
	}
	
	100% {
        background:gray;
		transform: translateX(100%)
	}
}

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>
</div>

这有帮助吗？

编辑

代码片段现在具有淡入效果。

Answer 2

它是否必须是 HTML 代码，因为如果我这样做，我会使用 WordPress 之类的东西并获得一个投资组合主题，我确信我已经看到了一个非常相似的主题。这将是使用 GoDaddy 实现此目的的一种简单方法。