Question

我想创建一个包含展示图片的简单响应式网站。靠我自己，但如果有模板，没问题。但无论如何我想学习它。

要求：

一个宽度的图片
图片始终位于页面的中间（0自动）
列数 - 图像随浏览器宽度而变化
没有图像的高度限制。只有固定宽度（+保持纵横比）。
完美示例：www.kristianhammerstad.com - 尝试调整窗口大小，我想要实现这一目标。也适用于移动浏览器（显示图像后的图像）
我更喜欢没有JS ，只有媒体查询 - 可能？

这是我到目前为止所拥有的：

＆＃13;

* { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

body { font: normal 14px Helvetica, Arial, sans-serif; line-height: 30px; color: #333; }

.left { float: left; } 
.right { float: right; }  

.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }

hr {
  margin: 0;
  border: 0;
  width: auto;
  border-top: 1px solid #aaaaaa;
  opacity: .25;
  margin: 0 auto;
}

h1 {
    letter-spacing: 2px;
    font-weight: 300;
    text-align: center;
    font-size: 2em; 
    line-height: 1.3em;
    color: #333;
}

h2 {
    letter-spacing: 1px;
    font-weight: 300;
    text-align: center;
    font-size: 1em; 
    margin-bottom: 60px;
    color: #666;
    text-transform: uppercase;
}

/* ---------------------------------------------------------- */

.wrapper { 
    width: 950px; margin: 0 auto; 
}

#name {
    margin-top: 50px;
}

/* ---------------------------------------------------------- */

#works {
    margin-top: 50px;
}

#works h2 {
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
    text-align: left;
    font-size: 1.3em; 
    margin-bottom: 10px;
    color: #666;
    text-transform: none;
}

#work-one {
    display: block;
    width: 460px;
    height: 500px;
    margin-right: 30px;
    margin-bottom: 30px; 
}

#work-two {
    display: block;
    width: 460px;
    height: 300px;
}

#work-three {
    display: block;
    width: 460px;
    height: 700px;
    margin-bottom: 30px; 
}

#work-four {
    display: block;
    width: 460px;
    height: 200px;
}

/* ---------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

/* I am not sure about break points */

}

@media only screen and (min-width: 320px) and (max-width: 767px) {

/* I am not sure about content here */   

}

＆＃13;

    <div class="wrapper">
        
        <div id="name">       
                
            <h1>IMAGES</h1>
            <h2>showcase</h2>

        </div>

        <div id="works">  

            <div class="left">
            
                <a id="work-one" href="#"><img src="http://placehold.it/460x500?text=Placeholder" ></a>
              
                <a id="work-two" href="#"><img src="http://placehold.it/460x300?text=Placeholder" ></a>
            
            </div>

            <div class="right">

                <a id="work-three" href="#"><img src="http://placehold.it/460x700?text=Placeholder" ></a>
              
                <a id="work-four" href="#"><img src="http://placehold.it/460x200?text=Placeholder" ></a>
      

            </div>          

        </div><div class="clearfix"></div>

    </div>

＆＃13;

Answer 1

首先，建议使用网格系统。一种常见的已知和使用的是bootstrap 有了它，您可以轻松设置您想要的布局。

其次，要实现这种“重新定位”效果，您需要一个名为 masonry 的 JS 库。它将自己挂钩在resize事件中以及最初初始化dom时它计算包装所有图像的容器宽度和图像宽度，使用复杂算法计算新位置，并使用您看到的动画效果重新定位它们。

也许这个教程（有源代码）会对您有所帮助：http://creative-punch.net/2014/01/full-screen-image-gallery-using-css-masonry/

无JS的响应式固定宽度图像展示

1 个答案: