0
I have a Home page that lists Projects, each div has a different class from the other, for example, the first project, shows an image, which is in a div that has a class col-lg-6 col-md-12 col-sm-12, already the next two are in a div with the class col-lg-3 col-md-6 col-sm-12. So when I’m going to list the projects on the home page, I use a:
Foreach(var Item in Projetos)
{
<div class="project-block masonry-item col-lg-6 col-md-12 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/1.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/1.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
That is, so I will always repeat the same div, with the same class.
I’ve done a lot of research, and I’ve seen that I’m probably only going to be able to solve this with a Javascrip and/or Jquery. but I don’t have a solid foundation for how to do that.
This is the layout I’m trying to put together on the Home page
And here is the HTML of the Main page, "The part where shows the projects"
<section class="gallery-section">
<div class="auto-container">
<!-- Title Box -->
<div class="title-box">
<h1>Olá. Aqui vamos ver alguns trabalhos <br> de graffite no estado de Rondônia</h1>
</div>
<div class="styled-border">
</div>
<div class="masonry-items-container row clearfix">
<!-- Project Block -->
<div class="project-block masonry-item col-lg-6 col-md-12 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/1.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/1.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/2.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/2.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/3.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/3.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-6 col-md-12 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/4.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/4.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/5.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/5.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/6.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/6.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/7.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/7.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/8.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/8.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Project Block -->
<div class="project-block masonry-item col-lg-3 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image">
<img src="images/gallery/9.jpg" alt="" />
<!-- Overlay Box -->
<div class="overlay-box">
<div class="overlay-inner">
<div class="overlay-content">
<div class="content">
<h6><a href="projeto.html">Nome Do Projeto</a></h6>
<div class="category">Categoria</div>
<a class="plus" href="images/gallery/9.jpg" data-fancybox="gallery" data-caption=""><span class="flaticon-plus-symbol"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Lower Content -->
@Html.Action("_FrasePagina", "Home")
</div>
</section>
Someone can tell me how I can put this layout together. since my loop can only be done in a Divs block, how would I use a script to solve this problem? it is possible to do using only Asp.Net MCV properties?
I didn’t get it right, you have this first div major, and you want whenever you include a new item to be the biggest, and the biggest that was already there "walk" to the side and get smaller, like going to the place of the second son that was there is this?
– hugocsl
In fact each block with that mark
<!-- Project Block -->, is a div with different class, so when I go to make a loop, usually just to repeat a single block. how I want to assemble this layour that I posted the photo, I wanted to know how I do to modify the next div. for example --> in the first loop of foreach, shows the div1, when the second and the third loop happens, I want to show the div2 and so on.– Rafael Passos