与Google图片搜索结果类似的信息框 [英] Info box similar to Google Image Search Results

查看：128
本文介绍了与Google图片搜索结果类似的信息框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下是我要从Google搜寻图片搜寻结果中借用的一些因素：




  • 每个项目都相邻


  • 当一个项目被点击时，信息框会滑动


  • 当选择的项目的行下方打开时，它会填充浏览器的宽度。信息框被打开，如果浏览器宽度被改变，则项目落入它可以填充的行（顶部第一）或落入下面的行。这不会影响信息框的100％宽度或其当前所选项目行下方的位置。




我已经实现了第一个项目符号，创建了 display：inline-block



解决方案，主要是HTML和CSS的第一，JavaScript（JQuery，AJAX等）只有必要，我不喜欢使用太多的HTML属性，除了我需要使这个工作，如 id ， class ， src

如果我可以坚持只是HTML元素，然后使用CSS样式，什么是无法完成的剩余部分只使用CSS和HTML来实现JavaScript（或任何衍生的JQuery，AJAX 

  
 
 
 
 >< html> 
< head> 
< style> 
 div 
 {
 display：inline-block; 
 height：200px; 
 width：200px; 
} 
< / style> 
< / head> 
< body> 
< div> 
< img /> 
< / div> 
< div> 
< img /> 
< / div> 
< div> 
< img /> 
< / div> 
< div> 
< img /> 
< / div> 
< div> 
< img /> 
< / div> 
< div> 
< img /> 
< / div> 
< / body> 
< / html>

编辑：好的，我想出了什么，它确实是我想要的，希望这有助于任何想要做同样的事情。

 < html> 
< head> 
< script> 
有些JavaScript / JQuery等代码，
首先把'info'DIV块放在
之后的选择项（代码），然后交替
' '.info'类的$ CSS属性
从无到正常所以它正好低于
选择的项目。只是将没有更改为正常是
足够因为'clear'和' float'属性。 
< / script> 
< style> 
 div.item 
 {
 background-color：blue; 
 border：red 5px solid; 
 display：inline-block; 
 height：200px; 
 width：200px; 
} 
 
 div.info 
 {
 background-color：gray; 
 float：left; 
 clear：both; 
 width：100％; 
 height：200px; 
 display：normal; 
} 
< / style> 
< / head> 
< body> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =info> 
这里有关于所选项目的一些很酷的细节。 
有你的JS代码将这个DIV块放在代码中选定的DIV块之后。 
你会注意到，无论你改变浏览器的宽度多少，
这个块总是保留在所选择的项目下，只要你的JavaScript 
把这个代码块直接放在选择的项目之后。 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< / body> 
< / html>

尝试此操作并调整浏览器宽度，而显示属性信息 DIV设置为正常。你会注意到所有的项目框上升到信息 DIV随着宽度的增加，它们落在它下面随着宽度的减少。希望这有助于某人; D

解决方案

如果你想尽可能避免使用javascript，可以创建<$ c $每个< div class =item> 之后有关图像的详细信息，请参阅< div class ='info'> 像这样：

 < div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =info> 
有关第一个图像的详细信息。 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =info> 
第二个图像的详细信息。 
< / div> 
< div class =item> 
< img src =some_relative_image.png/> 
< / div> 
< div class =info> 
关于第三个图像的详细信息。 
< / div> 
  





  div.info 
 {
 display：normal; 
}

与：

  div.info 
 {
 display：none; 
}

这样会在加载网页时隐藏详细信息。





最后，插入以下 jQuery 代码，以便在单击< div class =item> 时显示详细信息：

  $（div.item）。click（function（）{
 $（div.info）。css（display，none）; 
 $（this）.find（+ div.info）css（display，block）; 
}）;





jsFiddle这里


Here are some factors I would like to borrow from Googles Image Search Results:

  • Each item sits next to each other and falls to the next row if it cant fit in the current row because of the browser windows width.

  • When one item is clicked on, an info box slides open directly below the row of the selected item, it fills the width of the browser, also an indicator is visible at the bottom of the selected item.

  • When the info box is opened, if the browser width is changed, the items fall into a row that it can fill (top first) or fall into the row below. this does not affect the 100% width of the info box or its position directly below the row of the currently selected item.

I already have implemented the first bullet by creating DIVs that have display: inline-block

I want a solution thats mostly HTML and CSS first, and JavaScript (JQuery, AJAX etc.) only if necessary, I dont like using too many HTML attributes except for ones I'd need to make this work, like id, class, src etc. I usually use CSS whenever possible instead.

If I can stick to just HTML elements and then style them with CSS and what ever remnants can't be fulfilled with just CSS and HTML be fulfilled with JavaScript (or any derivative JQuery, AJAX etc).

an example of where im at so far:

<html>
    <head>
        <style>
            div
                {
                     display: inline-block;
                     height: 200px;
                     width: 200px;
                }
        </style>
    </head>
    <body>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
       <div>
           <img/>
       </div>
    </body>
</html>

EDIT: OK heres what I came up with, it does exactly what I wanted it to do, hope this helps anyone looking to do the same.

<html>
    <head>
        <script>
            "Some JavaScript/JQuery etc code that will,
             first put the 'info' DIV block right after
             the selected item (code-wise), then alternates
             the 'display' CSS property of the '.info' class
             from none to normal so it renders just below the
             selected item. Just changing none to normal is
             enough because of the 'clear' and 'float' properties."
        </script>
        <style>
            div.item
                {
                    background-color: blue;
                    border: red 5px solid;
                    display: inline-block;
                    height: 200px;
                    width: 200px;
                }

            div.info
                {
                    background-color: grey;
                    float: left;
                    clear: both;
                    width: 100%;
                    height: 200px;
                    display: normal;
                }
        </style>
    </head>
    <body>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="info">
           Here lies some cool details about the item selected.
           Have your JS code put this DIV block right after the selected DIV block in code.
           You will notice that no matter how much you change the width of the browser,
           this block always remains under the selected item as long as your JavaScript
           put this code block directly after the selected item. 
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
       <div class="item">
           <img src="some_relative_image.png"/>
       </div>
    </body>
</html>

try this and resize the browsers width while the display property of the info DIV is set to normal. You will notice all the item boxes rise above the info DIV as the width increases and they fall under it as the width decreases. Hope this helps someone ;D

解决方案

If you want to avoid javascript as much as possible, you can create a <div class='info'> with the details about the image after each <div class="item"> like so:

<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the first image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the second image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the third image.
</div>

After that, replace this line in your css:

div.info
{
    display: normal;
}

with:

div.info
{
    display: none;
}

This will make the details hidden when the page is loaded.

And finally, insert the following jQuery code to make the details appear when <div class="item"> is clicked:

$("div.item").click(function (){
    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block"); 
});

jsFiddle here

这篇关于与Google图片搜索结果类似的信息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆