javascript - 响应式图库 Vue.js

标签 javascript html css vue.js

大家晚上好，我正在做一个投资组合页面，你需要根据窗口的大小在 vue.js 上调整 block 的大小。 enter image description here

图像中的图 block 应始终为正方形，并且在调整大小时它可以减小(到特定大小)或一行中的图 block 数量简单地改变。我不知道该怎么做

下面我将展示我完成的整个布局，也许它需要更改。我想马上澄清，我只懂网页设计，所以布局和代码本身可能并不完美

window.addEventListener('load', () => {
    const loadPhoto = new Vue({
        el: '#app',
        data: {
            photos:[
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                    {name: 'photo1', url: 'assets/plate-photo/plate_one.jpg'},
                    {name: 'photo2', url: 'assets/plate-photo/plate_two.jpg'},
                    {name: 'photo3', url: 'assets/plate-photo/plate_three.jpg'},
                    {name: 'photo4', url: 'assets/plate-photo/plate_four.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_five.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_six.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_seven.jpg'},
                    {name: 'photo5', url: 'assets/plate-photo/plate_eate.jpg'},
                    {name: 'photo6', url: 'assets/plate-photo/plate_nine.jpg'},
                    {name: 'photo7', url: 'assets/plate-photo/plate_ten.jpg'},
                ]
        },
    });
    
});
@media (max-width: 500px) {
  .nav-wrap {
    display: none;
  }
  .nav-wrap .container {
    opacity: 1;
  }
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Work Sans', sans-serif;
  user-select: none;
}

.content-padding {
  padding-right: 20px;
}

.wrap-body {
  display: flex;
}
.wrap-body .nav-wrap {
  width: 400px;
  height: 100vh;
  background-color: #242b2e;
  box-shadow: 0px 4px 20px #3d3d3d;
  z-index: 100;
  position: sticky;
  top: 0;
  left: 0;
}
.wrap-body .nav-wrap .logo-wrap {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.wrap-body .nav-wrap .logo-wrap .logo .logo-svg {
  width: 250px;
}
.wrap-body .nav-wrap .nav-main-wrap .main-title li {
  text-align: right;
  padding: 20px;
  background: linear-gradient(#333b3f, #2f363a);
  transition: .5s;
  transition-delay: .4s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
}
.wrap-body .nav-wrap .nav-main-wrap .main-title li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  font-size: 18px;
}
.wrap-body .nav-wrap .nav-main-wrap .main-title li:hover {
  background: none;
  background-color: #2db8b7;
}
.wrap-body .nav-wrap .nav-main-wrap .main-title li:hover > a {
  text-shadow: 0px 0px 10px #464646;
}
.wrap-body .nav-wrap .nav-main-wrap .main-title li:focus {
  background-color: #30383c;
}
.wrap-body .nav-wrap .filter-wrap {
  padding-top: 25px;
  border-bottom: 1px solid #1e282b;
}
.wrap-body .nav-wrap .filter-wrap .filter-title {
  text-align: right;
}
.wrap-body .nav-wrap .filter-wrap .filter-title .filter-title-text {
  color: #2db8b7;
  font-size: 18px;
}
.wrap-body .nav-wrap .filter-wrap .filter-title .filter-img {
  width: 20px;
  margin-left: 12px;
}
.wrap-body .nav-wrap .filter-wrap .filter-list {
  margin-top: 25px;
  margin-bottom: 25px;
}
.wrap-body .nav-wrap .filter-wrap .filter-list li {
  margin-bottom: 15px;
  text-align: right;
  transform: .8s;
  -webkit-transform: .8s;
  -moz-transform: .8s;
  -ms-transform: .8s;
  -o-transform: .8s;
}
.wrap-body .nav-wrap .filter-wrap .filter-list li .filter-btn {
  font-size: 14px;
  color: #6b7072;
  text-decoration: none;
  background: none;
  border: none;
  outline: none;
}
.wrap-body .nav-wrap .filter-wrap .filter-list li .filter-btn:hover {
  color: #929697;
}
.wrap-body .nav-wrap .filter-wrap .filter-list li .filter-btn:focus {
  color: #ffffff;
  text-transform: uppercase;
}
.wrap-body .nav-wrap .filter-wrap .filter-list li:last-child {
  margin-bottom: 0;
}
.wrap-body .nav-wrap .nav-footer-wrap {
  padding-top: 30px;
}
.wrap-body .nav-wrap .nav-footer-wrap .social-wrap {
  display: flex;
  justify-content: flex-end;
}
.wrap-body .nav-wrap .nav-footer-wrap .social-wrap .icon {
  width: 25px;
  height: 25px;
  margin-left: 10px;
}
.wrap-body .nav-wrap .nav-footer-wrap .text-sub-footer {
  text-align: right;
  padding-top: 30px;
  padding-bottom: 30px;
}
.wrap-body .nav-wrap .nav-footer-wrap .text-sub-footer .text-sub {
  color: #929697;
  font-size: 14px;
}
.wrap-body .main-wrap {
  position: relative;
}
.wrap-body .main-wrap .info-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
}
.wrap-body .main-wrap .info-tab .info-btn {
  width: 70px;
  height: 70px;
  padding: 4px;
  background-color: #2db8b7;
  border: none;
  border-radius: 2px;
  outline: none;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  box-shadow: 0px -1px 3px #000000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.wrap-body .main-wrap .info-tab .info-btn .btn-logo {
  border: 1px solid #ffffff;
  padding: 5px;
}
.wrap-body .main-wrap .info-tab .info-tab-wrap {
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  padding: 10px;
  opacity: 0;
}
.wrap-body .main-wrap .info-tab .info-tab-wrap .info-tab-list {
  height: 25px;
  margin: 10px;
  display: flex;
}
.wrap-body .main-wrap .info-tab .info-tab-wrap .info-tab-list .info-tab-icon {
  width: 25px;
  height: 25px;
  fill: #fff;
  margin-right: 20px;
}
.wrap-body .main-wrap .info-tab .info-tab-wrap .info-tab-list .info-tab-text {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.wrap-body .main-wrap .info-tab .info-btn:active + .info-tab-wrap {
  opacity: 1;
}
.wrap-body .main-wrap .portfolio-wrap {
  display: flex;
  flex-wrap: wrap;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat {
  width: 200px;
  height: 200px;
  position: relative;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .img {
  width: 100%;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-sup {
  font-size: 1.2em;
  color: #fff;
  margin-bottom: 5px;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-sub {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-underline {
  width: 140px;
  height: 1px;
  background-color: #fff;
  margin-bottom: 10px;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-btn {
  border: none;
  background: none;
  outline: none;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-btn .hover-title-right {
  width: 15px;
  height: 15px;
  padding: 15px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat .hover-title .hover-title-btn:focus > .hover-title-right {
  border: 2px solid #ffffff;
}
.wrap-body .main-wrap .portfolio-wrap .wrapper-plat:hover > .hover-title {
  background-color: rgba(45, 184, 183, 0.9);
  opacity: 1;
  -webkit-box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49);
  box-shadow: inset 0px 0px 17px -1px rgba(0, 0, 0, 0.49);
}

/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="portfolio">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript,portfolio,girls,drugs">
    <meta name="author" content="Eko Bilske">
    <link rel="stylesheet" href="style/style.css">
    <script src="scripts/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700,900&display=swap" rel="stylesheet">
    <title>Kappe For Creatives</title>
</head>
<body>
    <section class="wrap-body">
        <!--NAVIGATION-->
        <section class="nav-wrap">
            <!--logo wrap-->
            <section class="logo-wrap">
                <a href="index.html" class="logo">
                    <img src="assets/logo-01.svg" alt="logo site" class="logo-svg">
                </a>
            </section>
            <!--/logo wrap-->
            <!--main wrap-->
            <section class="nav-main-wrap">
                <ul class="main-title">
                    <li><a href="###">home</a></li>
                    <li><a href="###">work</a></li>
                    <li><a href="###">about</a></li>
                    <li><a href="###">blog</a></li>
                    <li><a href="###">services</a></li>
                    <li><a href="###">contact</a></li>
                </ul>
            </section>
            <!--/main wrap-->
            <!--filter wrap-->
            <section class="filter-wrap">
                <div class="filter-title content-padding">
                    <span class="filter-title-text">Filter</span>
                    <img src="assets/filter.svg" alt="filter img" class="filter-img">
                </div>
                <ul class="filter-list content-padding">
                    <li><button class="filter-btn">All works</button></li>
                    <li><button class="filter-btn">web-design</button></li>
                    <li><button class="filter-btn">illustration</button></li>
                    <li><button class="filter-btn">photography</button></li>
                    <li><button class="filter-btn">wallpapers</button></li>
                    <li><button class="filter-btn">brochures</button></li>
                </ul>  
            </section>
            <!--/filter wrap-->
            <!--nav footer wrap-->
            <section class="nav-footer-wrap content-padding">
                <section class="social-wrap">
                    <a href="http://www.twiter.com" target="_blank">
                        <svg class="icon">
                            <use xlink:href="#linked"></use>
                        </svg>
                    </a>
                    <a href="http://www.google.com" target="_blank">
                        <svg class="icon">
                            <use xlink:href="#twitter"></use>
                        </svg>
                    </a>
                    <a href="http://www.twitter.com" target="_blank">
                        <svg class="icon">
                            <use xlink:href="#google"></use>
                        </svg>
                    </a>
                    <a href="http://www.flickr.com" target="_blank">
                        <svg class="icon">
                            <use xlink:href="#flickr"></use>
                        </svg>
                    </a>
                    <a href="http://www.facebook.com" target="_blank">
                        <svg class="icon">
                            <use xlink:href="#facebook"></use>
                        </svg>
                    </a>
                </section>
                <div class="text-sub-footer">
                    <span class="text-sub">©</span>
                    <script type="text/javascript">document.write(new Date().getFullYear());</script>
                    <span class="text-sub">Kappe, All Rights Reserved</span>
                </div>
            </section>
            <!--/nav footer wrap-->
        </section>
        <!--/NAVIGATION-->
        <!--PORTFOLIO PLATE-->
        <section class="main-wrap">
            <!--info-tab-->
            <section class="info-tab">
                <button class="info-btn">
                    <img src="assets/info-logo.png" alt="Info" class="btn-logo">
                </button>
                <section class="info-tab-wrap">
                    <div class="info-tab-list">
                        <svg class="info-tab-icon">
                            <use xlink:href="#phone"></use>
                        </svg>
                        <p class="info-tab-text">9930 1234 5679</p>
                    </div>
                    <div class="info-tab-list">
                        <svg class="info-tab-icon">
                            <use xlink:href="#send"></use>
                        </svg>
                        <p class="info-tab-text">contact@domain.com</p>
                    </div>
                    <div class="info-tab-list">
                        <svg class="info-tab-icon">
                            <use xlink:href="#home"></use>
                        </svg>
                        <p class="info-tab-text">street address example</p>
                    </div>
                </section>
            </section>
            <!--/info-tab-->
            <section class="portfolio-wrap" id="app">
                <div class="wrapper-plat" v-for="photo in photos">
                        <div class="hover-title">
                            <div class="hover-title-sup">Cool App Design</div>
                            <div class="hover-title-sub">development, mobile</div>
                            <div class="hover-title-underline"></div>
                            <button class="hover-title-btn">
                                <img src="assets/right.png" alt="" class="hover-title-right">
                            </button>
                        </div>
                        <img :src="photo.url" class="img">
                </div>
            </section>
        </section>
        <!--/PORTFOLIO PLATE-->
    </section>  

</body>
</html>

最佳答案

据我了解，您想制作响应式方形 div，对吗？

一种简单的方法是使用视口(viewport)宽度 (vw) 值调整 div 的大小。您可以在下面的 .cat div 的高度和宽度值上看到它的使用。

.wrapper{
  display:flex;
}

.cat {
  height: 25vw;
  width: 25vw;
  background-image: url("https://media.wired.com/photos/5cdefc28b2569892c06b2ae4/master/w_2560%2Cc_limit/Culture-Grumpy-Cat-487386121-2.jpg");
  background-size: cover;
  background-position: center;
}
<div class="wrapper"> 
  <div class="cat"></div>
  <div class="cat"></div>
  <div class="cat"></div>
  <div class="cat"></div>
</div>

还有其他方法，但我认为这个方法非常简单。您可能会在这里找到有用的信息:How to style a div to be a responsive square?

关于javascript - 响应式图库 Vue.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59079730/

上一篇：css - 在一个元素上 react native 动画多个动画

下一篇：css - 悬停后元素 "jumps"

相关文章：

html - 我怎样才能让这个图像背景只出现在该部分的一半？

javascript - "Please wait ..."、"Loading"、"Saving"、"Generating"实现

javascript - 捕获触发回发的任何事件，并在数据发送到服务器之前触发事件

php - 创建元素和 insertBefore 不起作用

html - 带有 style= 属性的 &lt;script&gt; 标签？

javascript - 使用 JavaScript 或 JQuery 更改所选图像的不透明度

javascript - 如何在不使用 html 属性标记数据绑定(bind)值的情况下使用 Knockout 进行绑定(bind)？

html - 我怎样才能让我的 Bootstrap flex 子元素具有相同的高度？

html - 如何让绝对定位的元素在 flex 布局中填充页面的高度？

css - 缓存的 CSS 文件有什么含义？

©2024 IT工具网  联系我们