频道栏目
首页 > 程序开发 > 软件开发 > Java > 正文
java web瀑布流实现产品概况浏览,可分页加载(附产品效果图)
2017-09-12 10:38:48      个评论    来源:夜月  
收藏   我要投稿

1、效果图

大屏显示效果

PC端显示

详情页

大屏详情页

中屏显示效果

中屏显示效果

详情页

中屏详情页面

手机端显示效果

手机端显示效果

手机详情页

手机详情页

2、页面布局代码

a.首页概况浏览 index.jsp

<body data-spy="scroll" data-target=".bs-docs-sidebar">
    <p id="masonry"></p>
</body>

数据加载

<script type="text/javascript">
$(function(){
    var offset = 0;
    function reshcb(offsetv){
        offsetv = offsetv * 10;
        $('#masonry').gridView({ url: '<%=path%>/qrycb.do', param: { name:'',limit:10,offset:offsetv} });
        offset = offset +1;
    }
    //初始化
    reshcb(offset);
    $(window).scroll(function() {
        //滚动到底部加载
        if(!isLoad && $(document).height() - $(window).height() - $(document).scrollTop() < 100) {
            reshcb(offset);
        }

    });

});
</script>

引入样式等文件

<jsp:include page="inc.jsp"></jsp:include>
<link rel="stylesheet" href="bootstrap-3.3.7/css/flickity.min.css" type="text/css"></link>
<link rel="stylesheet" href="bootstrap-3.3.7/css/index.css" type="text/css"></link>
<script type="text/javascript" src="bootstrap-3.3.7/js/flickity.pkgd.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/imagesloaded.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/gridview.js"></script>

gridview.js是自己封装的,其他的都是用各官网的插件

gridview.js代码片段如下:

$.fn.gridView = function(options) {
        options = $.extend({}, $.fn.gridView.defaults, options || {});
        var offset = options.param.offset;
        var target = $(this);
        if(offset==0){
            target.addClass('container-fluid');
        }
        if (options.data) {
            init(target, options.data);
        } else {
            if (!options.url)
                return;
            $.getJSON(options.url, options.param, function(data) {
                init(target, data);
            });
        }
    function init(target, data) {
            var path = getRootPath();
            var newItemContainer = $('<p/>');
            $.each(data, function (i, item) {
                var items = $('<p></p>');
                items.addClass('thumbnail');
                var slider = $('<p></p>');
                slider.addClass('me_flickity gallery');

                var str = item.PICTURL;
                var strs= new Array(); //定义一数组 
                strs=str.split(";"); //字符分割 
                for (i=0;i<strs.length ;i++ ) 
                { 
                    var slider_item = $('<p></p>');
                    slider_item.addClass('imgs gallery-cell');
                    var image = $('<img>');
                    image.attr('alt', item.COOKNAME);
                    image.attr('src', path+"/"+strs[i]);//展示图片
                    image.attr('jqimg', path+"/"+strs[i]);//放大图片
                    slider_item.append(image);
                    slider.append(slider_item);
                } 
                items.append(slider);
                //价格等信息
                var meta = $('<p></p>');
                meta.addClass('caption');
                meta.attr('itemid', item.COOKBOOKID);
                var h3= $('<p></p>');
                h3.addClass('title').text(item.COOKNAME);
                meta.append(h3);
                var brand = $('<p></p>');
                var explain = item.EXPLAIN;
                brand.addClass('content').text(explain);
                meta.append(brand);
                var price = $('<p></p>');
                price.addClass('author').text('¥'+item.PRICE);
                meta.append(price);
                items.append(meta);

                newItemContainer.append(items);
            });
            var newItems = newItemContainer.find('.thumbnail');
            refresh(target,newItems);
        }
        //js获取项目根路径,如: https://localhost:8080/yfpro  
        function getRootPath(){  
            //获取当前网址,如: https://localhost:8080/yfpro/index.jsp  
            var curWwwPath=window.document.location.href;  
            //获取主机地址之后的目录,如: yfpro/index.jsp  
            var pathName=window.document.location.pathname;  
            var pos=curWwwPath.indexOf(pathName);  
            //获取主机地址,如: https://localhost:8080  
            var localhostPaht=curWwwPath.substring(0,pos);  
            //获取带"/"的项目名,如:/yfpro  
            var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);  
            return(localhostPaht+projectName);  
        }  
        //添加点击事件
        $(document).on("click", ".caption", function (e) {
             var cid = $(this).attr("itemid");
            self.location = context.path + "/cbinfo.jsp?cid="+cid;
        });

imageload和flickity的使用

                target.imagesLoaded(function(){
                    target.masonry({
                        itemSelector: '.thumbnail',
                        isFitWidth: true
                    });
                });
                flicky = new Flickity( '.me_flickity', {
                    prevNextButtons: false,//禁止上下页按钮
                    wrapAround: true,//循环播放
                    cellAlign: 'left',
                    contain: true,
                    resize: true
                });

b.详情页面

页面布局cbinfo.jsp

<p class="container" style="margin: 10px">
        <p class="row clearfix">
            <p class="col-md-5 column">
                <p id="imgs"></p>
            </p>
            <p class="col-md-6 column" style="margin-top: 30px">
                <p class="row clearfix">
                    <p class="col-md-4 column">
                        <dl>
                            <dt id="cbcuis"></dt>
                            <dd id="cbname"></dd>
                            <dt>价格</dt>
                            <dd id="cbprice"></dd>
                            <dd id="cbyrl"></dd>
                            <dt>主料</dt>
                            <dd id="ingres"></dd>
                        </dl>
                    </p>
                    <p class="col-md-4 column">
                        <dl>
                            <dt>辅料</dt>
                            <dd id="ingre"></dd>
                            <dt>口味</dt>
                            <dd id="trait"></dd>
                            <dt>百科</dt>
                            <dd><a id="cburl"></a></dd>
                        </dl>
                    </p>
                    <p class="col-md-4 column">
                        <dl>
                            <dt>二维码信息</dt>
                            <dd><img id="qrcode" width="256px" height="256px"></dd>
                        </dl>
                    </p>
                </p>
            </p>
        </p>
        <p class="row clearfix" style="margin-top: 15px">
            <p class="col-md-12 column">
                <h3>说明</h3>
                <p id="explain"></p>
            </p>
        </p>
        <p class="row clearfix">
            <p class="col-md-12 column">
                <h3>步骤</h3>
                <p id="dofauc"></p>
            </p>
        </p>
        <p class="row clearfix">
            <p class="col-md-12 column">
                <h3>技巧与特性</h3>
                <p id="skill"></p>
            </p>
        </p>
    </p>

数据加载

<script type="text/javascript">
    $(function() {
        $.post('qryCbInfo.do', {
            id : '${param.cid}'
        }, function(data) {
            var cb = JSON.parse(data);
            if (cb.success) {
                var cbinfo = JSON.parse(cb.info);
                var str = cbinfo.picturl;
                var strs= new Array(); //定义一数组 
                strs=str.split(";"); //字符分割 
                for (i=0;i<strs.length ;i++ ) 
                { 
                    var image = $('<img>');
                    image.attr('alt', cbinfo.cookname);
                    image.attr('src', strs[i]);//展示图片
                    $('#imgs').append(image);
                } 
                $('#imgs').flickity({
                    wrapAround: true,
                    cellAlign: 'left',
                    contain: true,
                    resize: true
                });

                $('#cbcuis').text(cbinfo.cuisine);
                $('#cbname').text(' ' + cbinfo.cookname);
                $('#cbprice').text(' ¥' + cbinfo.price);
                $('#ingres').html(' ' + cbinfo.ingredients);
                $('#ingre').html(' ' + cbinfo.ingredient);
                $('#trait').html(' ' + cbinfo.tedian);
                $('#cburl').attr("href",cbinfo.curl).text(" 更多信息");
                $('#explain').html('  ' + cbinfo.explain);
                $('#dofauc').html(' ' + cbinfo.dofauc);
                $('#skill').html(' ' + cbinfo.yaodian);
                $('#qrcode').attr('src', 'qrycode?url='+window.location.href);//二维码
            } else {
                $('body').html(cb.info);
            }

        });
    });
</script>

样式和js引入

<jsp:include page="inc.jsp"></jsp:include>
<link rel="stylesheet" href="bootstrap-3.3.7/css/flickity.min.css" type="text/css"></link>
<script type="text/javascript" src="bootstrap-3.3.7/js/flickity.pkgd.min.js"></script>
<style type="text/css">
    #cburl{
        text-decoration:none;
    }
    #imgs{
        height: 300px;
    }
    #imgs img{
        height: 330px;
        width: 100%;
    }
</style>

inc.jsp引入一些公共的js和样式

<%
String path = request.getContextPath();//格式:/yfpro
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";//格式:https://localhost:8080/yfpro/
%>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<!-- html5兼容IE9以下的版本 -->
<!--[if lt IE 9]>
      <script src="<%=path%>/bootstrap-3.3.7/js/html5shiv.min.js"></script>
      <script src="<%=path%>/bootstrap-3.3.7/js/respond.min.js"></script>
    <![endif]-->

<!-- 引入JS文件 -->
<!--[if !IE]><!-->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=path%>/bootstrap-3.3.7/js/jquery-3.2.1.min.js'>" + "<"+"/script>");
</script>
<!--<![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=path%>/bootstrap-3.3.7/assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript" src="<%=path%>/bootstrap-3.3.7/js/bootstrap.min.js"></script>

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="<%=path%>/bootstrap-3.3.7/css/bootstrap.min.css" type="text/css">

<!-- 设置图标 -->
<link rel="shortcut icon" href="<%=path%>/bootstrap-3.3.7/images/logo.png" type="image/x-icon">
点击复制链接 与好友分享!回本站首页
上一篇:Java编程开发教程_Java初始
下一篇:JAVA:volatile关键字,内存模型的相关概念
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站